首先引入三个组件 HelloWorld,Father,Son，
三个组件的关系为 HelloWorld>Father>son
下面组件通信的介绍中全部采用这三个组件来实现
HelloWorld
1.props 和 $emit 父子组件之间的通信
props 进行从父组件到子组件间的传值
在father 组件中为 son 组件绑定数据,此时可以将 fahter 组件中 fatherMes 的值传入 Son 组件中
在Son 组件中接收 father 组件传入的值
props: ["fatherMes"]
在 Son组件中使用传入的值
使用起来和Son 自身的变量无区别
注意：子组件只能用父组件的值但是不能修改
$emit 自定义事件通过子组件改变父组件的值以及子组件向父组件传值
A. 改变父组件值
在子组件中定义方法函数,方法函数里自定义事件名
methods: {
fn() {
this.$emit("change-mes");
} }
子组件中通过触发 fn() 方法来触发事件
点击我
1
父组件内绑定事件
1
触发事件执行相应方法函数 changeMes
changeMes() {
this.fatherMes = "我是改变后的父亲";
}
B. 向父组件传值
原理和改变父组件的值相同，唯一区别是在注册事件时传递参数
注册事件时将子组件的值，传入事件的参数
fn() {
this.$emit("change-mes", this.sonMes);
}
接收事件
1
在事件触发的函数内接收事件传递的参数
changeMes: function(sonMes) {
this.fatherMes = sonMes;
}
1
2
3
这样就把子组件的属性赋值给了父组件的属性
2.通过 $parent 和 $chidren 来实现父子组件的传值
A. $parent
在子组件中定义方法改变父组件属性
fn() {
this.$parent.fatherMes = "改变后的父亲";
}
1
2
3
触发方法就可以改变父组件的值
点击我
1
B. $children
在父组件内定义方法 fn
fn() {
alert(this.$children[0].sonMes);
this.$children[0].sonMes = "111";
alert(this.$children[0].sonMes);
}
触发该方法
点击我
1
注意：通过 $children 获取的子组件为数组，并且顺序是混乱的
3. provide和inject 实现祖先和后代之间通信
祖先组件通过 provide 提供值，后代通过 inject 获取这个值
在HelloWorld 组件中
provide() {
return {
mes: this.mes
};
}
1
在son 组件中
inject: ["mes"]
1
== 注意如果在 son 组件中定义方法 fn 改变根组件的值==
fn() {
alert(this.mes);
this.mes = "改变后的根组件";
alert(this.mes);
}
1
2
3
4
5
此时只会改变子组件的引用 mes 而不会改变父组件的 mes
5. $root 直接访问根实例，即main.js
此方法原理同 vuex 类似，将数据储存在根组件里，这样所有组件都可以访问到
this.$root
1
6. VUEX
创建一个全局对象，将数据放在全局对象里，这样所有组件都可以访问这个对象
官方 vuex 文档
https://vuex.vuejs.org/zh/