Article directory
foreword
This article is based on the previous article - the understanding of Vue component nesting and the use of mixin
包括父==>子传值 子==>父传值 兄弟组件传值
1. Establish the component structure
1. Two sibling components student and school are managed in the App
as shown in the figure:
2. Communication method
1. The parent component passes the value to the child component
①. Write the subcomponent student tag in the parent component App.vue, the code is as follows:
<student name2="李四" :age2="18" />
②. The student component receives through the props object:
//绑定方法：
<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);
}
③. Results:
2. The child component passes the value to the parent component
1. $ref method
①. Write the subcomponent school tag in the parent component App.vue, the code is as follows:
<school ref="xuexiao" />
//在mounted钩子中加入
this.$refs.xuexiao.$on("SoF", (data) => {
console.log("我是App容器,收到来自子组件的信息:", data);
});
②.student component triggers object reception through this.$emit:
//绑定方法：
<button @click="send_AppInfo">发送信息给父组件</button>
//methods:
send_AppInfo(name) {
this.$emit("SoF", this.name);
},
③. Results:
2. v-on binding event method
①. Write the subcomponent school tag in the parent component App.vue, the code is as follows:
//对school组件标签改为：
<school v-on:SoF2="getXuexiaoInfo" />
//在methods中加入
getXuexiaoInfo(area) {
this.msg = area;
console.log("我是App容器,收到来自school组件的信息:", area); }
②.school component triggers object reception through this.$emit:
//绑定方法(v-on方式)：
<button @click="send_AppInfo2">发送地区给父组件</button>
//methods:
send_AppInfo2(area){
this.$emit("SoF2", this.area);
},
③. Result: Click the v-on button:
3. Transfer values between sibling components
1. Global event bus $bus
①. Bind the global event bus $bus in mainjs
new Vue({
components: {
school,
},
render: (h) => h(App),
beforeCreate() {
// 构造一个傀儡$bus来实现兄弟组件通信
// 安装全局事件总线
Vue.prototype.$bus = this;
},
}).$mount("#app");
②. Set the school to send information to the student component. School component code:
//绑定方法：
<button @click="send_SchoolInfo">school组件发送信息到student组件</button>
//methods:
send_SchoolInfo(age) {
this.$bus.$emit("bro", this.name);
},
③.student component setting object receiving:
//在mounted钩子中加入
this.$bus.$on('bro',(data)=>{
console.log("收到来自兄弟组件school的信息:",data)
})
③. Results:
Summarize
Communication between all components can be achieved through a global event bus. But you need to pay attention to unbind the event after use, that is, unbind before destroying the component.