首先引入三个组件 HelloWorld,Father,Son，
三个组件的关系为 HelloWorld>Father>son
下面组件通信的介绍中全部采用这三个组件来实现
HelloWorld
<template>
<div class="hello">
<father></father>
</div>
</template>
<script>
import father from "./Father";
export default {
name: "HelloWorld",
data() {
return {
mes: "我是根组件"
};
},
components: {
father
}
};
</script
Father
<template>
<div>
<son></son>
</div>
</template>
<script>
import son from "./Son";
export default {
data() {
return {
fatherMes: "我是父亲"
};
},
components: {
son
}
};
</scrip
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
sonMes: "我是儿子"
};
}
};
</script>
1.props 和 $emit 父子组件之间的通信
props 进行从父组件到子组件间的传值
在father 组件中为 son 组件绑定数据,此时可以将 fahter 组件中 fatherMes 的值传入 Son 组件中
<son :fatherMes="fatherMes"></son>
在Son 组件中接收 father 组件传入的值
props: ["fatherMes"]
在 Son组件中使用传入的值
使用起来和Son 自身的变量无区别
<div>{{fatherMes}}</div>
注意：子组件只能用父组件的值但是不能修改
$emit 自定义事件通过子组件改变父组件的值以及子组件向父组件传值
A. 改变父组件值
在子组件中定义方法函数,方法函数里自定义事件名
methods: {
fn() {
this.$emit("change-mes");
} }
子组件中通过触发 fn() 方法来触发事件
<span v-on:click="fn()">点击我</span>
1
父组件内绑定事件
<son v-on:change-mes="changeMes"></son>
1
触发事件执行相应方法函数 changeMes
changeMes() {
this.fatherMes = "我是改变后的父亲";
}
B. 向父组件传值
原理和改变父组件的值相同，唯一区别是在注册事件时传递参数
注册事件时将子组件的值，传入事件的参数
fn() {
this.$emit("change-mes", this.sonMes);
}
接收事件
<son v-on:change-mes="changeMes"></son>
1
在事件触发的函数内接收事件传递的参数
changeMes: function(sonMes) {
this.fatherMes = sonMes;
}
1
2
3
这样就把子组件的属性赋值给了父组件的属性
2.通过 $parent 和 $chidren 来实现父子组件的传值
A. $parent
在子组件中定义方法改变父组件属性
fn() {
this.$parent.fatherMes = "改变后的父亲";
}
1
2
3
触发方法就可以改变父组件的值
<span @click="fn()">点击我</span>
1
B. $children
在父组件内定义方法 fn
fn() {
alert(this.$children[0].sonMes);
this.$children[0].sonMes = "111";
alert(this.$children[0].sonMes);
}
触发该方法
<span @click="fn()">点击我</span>
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/
网友评论