image.png
如上圖所示啤握，A 和 B鸟缕、B 和 C恨统、B 和 D 都是父子關(guān)系叁扫，C 和 D 是兄弟關(guān)系畜埋，A 和 C 是隔代關(guān)系（可能隔多代）。
本文總結(jié)了 vue 組件間通信的幾種方式悠鞍，如 props模燥、on、vuex掩宜、
children、
listeners 和 provide/inject
方法一牺汤、props/$emit
(A => B)父組件 A 通過(guò) props 的方式向子組件 B 傳遞
(B => A)通過(guò)在 B 組件中 emit,讓父組件監(jiān)聽到自定義事件 )。
1.父組件向子組件傳值
接下來(lái)我們通過(guò)一個(gè)例子补胚，說(shuō)明父組件如何向子組件傳遞值：在子組件 Users.vue 中如何獲取父組件 App.vue 中的數(shù)據(jù) users:["Henry","Bucky","Emily"]
//App.vue父組件
<template>
<div id="app">
<users v-bind:users="users"></users>//前者自定義名稱便于子組件調(diào)用，后者要傳遞數(shù)據(jù)名
</div>
</template>
<script>
import Users from "./components/Users"
export default {
name: 'App',
data(){
return{
users:["Henry","Bucky","Emily"]
}
},
components:{
"users":Users
}
}
//users子組件
<template>
<div class="hello">
<ul>
<li v-for="user in users">{{user}}</li>//遍歷傳遞過(guò)來(lái)的值溶其，然后呈現(xiàn)到頁(yè)面
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props:{
users:{ //這個(gè)就是父組件中子標(biāo)簽自定義名字
type:Array,
required:true
}
}
}
</script>
2.子組件向父組件傳值（通過(guò)事件形式）
接下來(lái)我們通過(guò)一個(gè)例子，說(shuō)明子組件如何向父組件傳遞值：當(dāng)我們點(diǎn)擊 “Vue.js Demo” 后瓶逃，子組件向父組件傳遞值，文字由原來(lái)的“傳遞的是一個(gè)值”變成“子向父組件傳值”厢绝，實(shí)現(xiàn)子組件向父組件值的傳遞。
image.png
// 子組件
<template>
<header>
<h1 @click="changeTitle">{{title}}</h1>//綁定一個(gè)點(diǎn)擊事件
</header>
</template>
<script>
export default {
name: 'app-header',
data() {
return {
title:"Vue.js Demo"
}
},
methods:{
changeTitle() {
this.$emit("titleChanged","子向父組件傳值");//自定義事件 傳遞值“子向父組件傳值”
}
}
}
</script>
// 父組件
<template>
<div id="app">
//與子組件titleChanged自定義事件保持一致
<app-header v-on:titleChanged="updateTitle" ></app-header>
// updateTitle($event)接受傳遞過(guò)來(lái)的文字
<h2>{{title}}</h2>
</div>
</template>
<script>
import Header from "./components/Header"
export default {
name: 'App',
data(){
return{
title:"傳遞的是一個(gè)值"
}
},
methods:{
updateTitle(e){ //聲明這個(gè)函數(shù)
this.title = e;
}
},
components:{
"app-header":Header,
}
}
</script>
總結(jié)
常見(jiàn)使用場(chǎng)景可以分為三類：
- 父子通信：
父向子傳遞數(shù)據(jù)是通過(guò) props代芜，子向父是通過(guò) events（parent/
attrs/$listeners
- 兄弟通信：
Bus嫡秕；Vuex - 跨級(jí)通信：
Bus苹威；Vuex；provide/inject API牙甫、listeners
