本篇文章在上篇文章——Vue组件嵌套的理解与mixin的使用的基础上进行
包括父==>子传值 子==>父传值 兄弟组件传值
1.在App中管理着两个兄弟组件student和school
如图:
①.在父组件App.vue中对子组件student标签进行编写,代码如下:
<student name2="李四" :age2="18" />
②.student组件通过props对象接收:
//绑定方法:
<button @click="get_AppInfo">获取父组件传来的值</button>
//加入props配置项:
props: {
name2: {
type: String,
required: true,
},
age2: {
type: Number,
required: true,
},
}
//methods:
get_AppInfo() {
console.log("从父组件传来:", this.name2, this.age2);
}
①.在父组件App.vue中对子组件school标签进行编写,代码如下:
<school ref="xuexiao" />
//在mounted钩子中加入
this.$refs.xuexiao.$on("SoF", (data) => {
console.log("我是App容器,收到来自子组件的信息:", data);
});
②.student组件通过this.$emit触发对象接收:
//绑定方法:
<button @click="send_AppInfo">发送信息给父组件</button>
//methods:
send_AppInfo(name) {
this.$emit("SoF", this.name);
},
①.在父组件App.vue中对子组件school标签进行编写,代码如下:
//对school组件标签改为:
<school v-on:SoF2="getXuexiaoInfo" />
//在methods中加入
getXuexiaoInfo(area) {
this.msg = area;
console.log("我是App容器,收到来自school组件的信息:", area); }
②.school组件通过this.$emit触发对象接收:
//绑定方法(v-on方式):
<button @click="send_AppInfo2">发送地区给父组件</button>
//methods:
send_AppInfo2(area){
this.$emit("SoF2", this.area);
},
①.在mainjs绑定全局事件总线$bus
new Vue({
components: {
school,
},
render: (h) => h(App),
beforeCreate() {
// 构造一个傀儡$bus来实现兄弟组件通信
// 安装全局事件总线
Vue.prototype.$bus = this;
},
}).$mount("#app");
②.设置school向student组件发送信息。school组件代码:
//绑定方法:
<button @click="send_SchoolInfo">school组件发送信息到student组件</button>
//methods:
send_SchoolInfo(age) {
this.$bus.$emit("bro", this.name);
},
③.student组件设置对象接收:
//在mounted钩子中加入
this.$bus.$on('bro',(data)=>{
console.log("收到来自兄弟组件school的信息:",data)
})
可通过全局事件总线来实现所有组件间的通信。但是需要注意在使用之后解绑事件,即销毁组件之前解绑。