1.父组件向子组件传输数据:自定义属性
1 //父组件
2 <Son :msg="message" :user="userinfo"></Son>
3
4 data(){
5 return{
6 message: 'hello vue.js',
7 userinfo: { name: 'zs', age: 20 }
8 }
9 }
//子组件
<template>
<div>
<h3>Son 组件</h3>
<p>message的值是: {{ msg }}</p>
<p>user的值是: {{ user }}</p>
</div>
</template>
props: ['msg', 'user']
子组件在父组件注册后,通过v-bind将data中所存储的数据绑定到<Son>中;
在子组件中通过props接收父组件绑定的值,再将其渲染,完成数据传输。
2.子组件向父组件传输数据:自定义事件
//子组件 Son
export default {
data() {
return {
count: 0,
};
},
methods: {
add() {
this.count++;
//修改数据时,通过 $emit() 触发自定义时间,把自增结果传给父组件
this.$emit("numchange", this.count);
},
},
}
//父组件
<Son @numchange="getNewCount"></Son>
export default {
data() {
return {
countFromSon: 0,
};
},
methods: {
//获取子组件传递过来的数据
getNewCount(val) {
this.countFromSon = val;
},
},
};
先在父组件 <Son> 中绑定一个自定义事件 numchange ,并在事件中写一个方法 getNewCount ,该方法是为了接收所需传参数并将其赋值给指定数据;
在子组件中通过add()方法中的 $emit 触发自定义事件 numchange ,并向其传入实参即父组件想要向子组件所传递的参数 this.count,this.count即是形参val的实参,将其赋值给父组件中的 countFromSon
3.兄弟组件之间的传输数据:EventBus
//兄弟组件A
import bus from './eventBus.js'
export default {
data() {
return {
str: "阿巴阿巴",
};
},
methods: {
sendMsg(){
//通过eventBus发送数据
bus.$emit("share", this.str);
}
}
//eventBus.js
import Vue from 'vue'
//向外共享Vue的实例对象
export default new Vue()
//兄弟组件B
//1.导入 eventBus 模块
import bus from "./eventBus.js";
export default {
data() {
return {
msgFromLeft: "",
};
},
created() {
//2.给bus绑定自定义事件
bus.$on("share", (val) => {
this.msgFromLeft = val;
});
},
};
1.初始化 EventBus 创建 eventBus.js,向外共享Vue实例对象,并在兄弟组件A和B中导入 eventBus.js
2.在作为数据发送方的 兄弟组件A 中,在 sendMsg 方法用$emit触发自定义事件share,将this.msg数据发送出去
3.在数据接收方 兄弟组件B ,通过给bus绑定自定义事件 share 接收数据并将其赋值给 msgFromLeft中