一、父向子传值
父组件(通过自定义 attribute 来传递数据)
<hello-world msg="Welcome to Your Vue.js App" :post-title="num"></hello-world>
data() {
return {
num: 1,
};
}
子组件(通过props接收数据)
props 可以是数组或对象,用于接收来自父组件的数据。
<p>{{ postTitle }}</p>
props: {
msg: String,
postTitle: {
type: Number,
},
}
子组件不能直接修改父组件传递过来的数据,而是在子组件里面写一个data(){}来存储接收过来的数据,子组件直接操作自己存的数据即可。
二、子向父传值
父组件(通过监听自定义事件)
<!-- 监听事件 my-event -->
<hello-world @my-event="showMsg"></hello-world>
methods: {
showMsg(msg) {
console.log(msg);
},
}
子组件(通过自定义事件 $emit)
触发当前实例上的事件。附加参数都会传给监听器回调。推荐你始终使用 kebab-case 的事件名。
<button @click="handleClick">子向父传值</button>
methods: {
handleClick() {
// 触发事件 my-event
this.$emit("my-event","1");
},
}
三、非父子之间组件之间传值
vue2中bus作为一个中转站,实现非父子之间组件之间的通信,具体使用方法如下:
1.在main.js中注册全局的bus
Vue.prototype.bus=new Vue();
2.在组件中使用
// A组建使用:this.bus.$emit('自定义事件名',实参)
methods:{
handleClick(){
// 触发事件 my-event
this.bus.$emit('my-event',true)
}
}
// B组建使用:this.bus.$on("自定义事件名", msg => {})
mounted() {
// 监听事件 my-event
this.bus.$on("my-event", msg => {
this.show = msg;
});
}
当然,event bus 只适于某些不复杂的场景,在需要频繁进行组件通信的情况下,还是应该尽量使用 Vuex ,不仅使用上更加简单,同时数据流的流向也会相对清晰。