Vue的组件通信：①父传子、②子传父、③兄弟组件通信
①父传子
父组件传到子组件数据是单向流动的,(子组件中修改props数据,是无效的，会有个红色的警告，如果确实需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量);
在父组件中给子组件标签绑定一个属性，属性上挂载需要传输的变量，在子组件通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用props:['属性名']、props:{属性名:数据类型};
(1) 父组件代码是：
-
<template>
-
<div class="parent">
-
<h2>{{ msg }}</h2>
-
<son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
-
</div>
-
</template>
-
<script>
-
import son from './Son' //引入子组件
-
export default {
-
name: 'HelloWorld',
-
data () {
-
return {
-
msg: '父组件',
-
}
-
},
-
components:{son},
-
}
-
</script>
引入子组件；
注册；
3.最后作为标签使用，在这个标签中动态绑定一个自定义属性;
(2)子组件son.vue代码是:
-
<template>
-
<div class="son">
-
<p>{{ sonMsg }}</p>
-
<p>子组件接收到内容：{{ faMsg }}</p>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: "son",
-
data(){
-
return {
-
sonMsg:'子组件',
-
}
-
},
-
props:['faMsg'],//接收psMsg值
-
}
-
</script>
4.子组件中通过props:['自定义属性名']接受父组件传过来的数据；子组件接受到的数据,不能去修改。
第一种方法：
props: ['childCom']第二种方法:
-
props: {
-
childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦
-
}
第三种方法:
-
props: {
-
childCom: {
-
type: String,
-
default: 'sichaoyun'
-
}
-
}
②子传父
在父组件中给子组件标签通过绑定自定义事件，接受子组件传递过来的事件，子组件通过this.$emit()触发父组件上的自定义事件，发送参数；
vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据;
(1)父组件(父组件通过绑定自定义事件，接收子组件传递过来的参数)代码是:
-
<template>
-
<div class="parent">
-
<h2>{{ msg }}</h2>
-
<p>父组件接手到的内容：{{ username }}</p>
-
<son psMsg="我是你爸爸" @transfer="getUser"></son>
-
<!-- 监听子组件触发的transfer事件,然后调用getUser方法 -->
-
</div>
-
</template>
-
<script>
-
import son from './Son'
-
export default {
-
name: 'HelloWorld',
-
data () {
-
return {
-
msg: '父组件',
-
username:'',
-
}
-
},
-
components:{son},
-
methods:{
-
getUser(msg){
-
= msg
-
}
-
}
-
}
-
</script>
（2）子组件(子组件通过this.$emit触发父组件上的自定义事件，发送参数)代码是：
-
<template>
-
<div class="son">
-
<p>{{ sonMsg }}</p>
-
<p>子组件接收到内容：{{ psMsg }}</p>
-
<!--<input type="text" v-model="user" @change="setUser">-->
-
<button @click="setUser">传值</button>
-
</div>
-
</template>
-
<script>
-
export default {
-
name: "son",
-
data(){
-
return {
-
sonMsg:'子组件',
-
user:'子传父的内容'
-
}
-
},
-
props:['psMsg'],
-
methods:{
-
setUser:function(){
-
this.$emit('transfer',)//触发transfer方法， 为向父组件传递的数据
-
}
-
}
-
}
-
</script>
③兄弟组件通信
通过初始化一个全局的$bus,在发送事件的一方通过$bus.$emit(“事件名”，传递的参数信息)发送，在接收事件的一方通过$bus.$on("事件名",参数)接收传递的事件。
假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。
(1)初始化，全局创建$bus,直接在项目中的 初始化 $bus :
-
//
-
window.$bus=new Vue();
(2)发送事件：$bus.$emit("aMsg", '来自A页面的消息');
-
<!-- -->
-
<template>
-
<button @click="sendMsg()">-</button>
-
</template>
-
-
<script>
-
//import $bus from "../";
-
export default {
-
methods: {
-
sendMsg() {
-
$bus.$emit("aMsg", '来自A页面的消息');
-
}
-
}
-
};
-
</script>
（3）接收事件(在 B页面 中接收A页面消息) 通过$bus.$on("事件名",callback):
-
<!-- -->
-
<template>
-
<p>{{msg}}</p>
-
</template>
-
-
<script>
-
//import $bus from "../";
-
export default {
-
data(){
-
return {
-
msg: ''
-
}
-
},
-
mounted() {
-
$bus.$on("aMsg", (msg) => {
-
// A发送来的消息
-
this.msg = msg;
-
});
-
}
-
};
-
</script>
-