1.父组件给子组件传值：

父组件(v-bind传值）

<div :msg="msg"></div>

子组件(default是为了避免父组件没有传值的情况）

export default{props:{msg:{type:String,default:'hello world'}}}

2.子组件给父组件传值：

this.$emit('方法名称', this.message);

3.兄弟组件传值：

1、兄弟之间传递数据需要借助于事件车，通过事件车的方式传递数据

2、创建一个Vue的实例，让各个兄弟共用同一个事件机制。

3、传递数据方，通过一个事件触发bus. bus.$emit('方法名称'，'传递的值')

4.接受数据放bus.$on(方法名，function(接收数据的参数){用该组件的数据接收传递过来的数据})，此时函数中的this已经发生了改变，可以使用箭头函数。

1.创建一个单独的bus.js

import Vue from 'vue' 

export default new Vue

2.兄弟组件分别引入bus.js ：import bus from '../../js/event.js'

3.传递数据的组件： bus.$emit('myFun'，'传递的值')

4.接收数据的组件：bus.$on('myFun',(message)=>{//这里最好用箭头函数，不然this指向有问题 

 this.msg = message})

4.顺便说下ref吧

1.ref可以获取到dom元素(<div ref='textDiv'></div> ,this.$refs.testDiv)，也可以获取子组件中的data和去调用子组件中的方法;

子组件：

<template><div></div></template>

<script>export default { data:{msg:'子组件的data'},

methods: { 

 open() { console.log("子组件方法执行") } 

openPar(){ console.log('调用父组件的方法');this.$emit("parentF");}

 }}</script>

父组件：获取子组件的data和方法(open);

<template>

<divid="app">

<HelloWorld ref="hello" @parentF='getData'/>

<button @click="getHello">获取helloworld组件中的值</button>

</div></template>

<script>

import 引入子组件;

export default {

 components: { HelloWorld }, data() { return {} },

 methods: { 

 getHello() { 

 console.log(this.$refs.hello.msg);//获取数据

 this.$refs.hello.open()；//调用子组件的方法

 this.$refs.hello.openPar()；//调用父组件的方法

    } }

getData(){

console.log('aldkjl')

}

};

子组件调用父组件的方法：openPar(){ console.log('调用父组件的方法');this.$emit("parentF");}

</script>