Vue 父子元件通訊
作者：小土豆biubiubiu
部落格園：www.cnblogs.com/HouJiao/
掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d
簡書：https://www.jianshu.com/u/cb1c3884e6d5
微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）
碼字不易，點贊鼓勵喲~
一.父子元件的關係構成
本篇文章將要總結的是Vue中父子元件之間的通訊方式。
那在vue中父子元件之間的關係是怎麼構成的呢，或者說哪個元件可以稱為是父元件，哪個元件又可以稱為是子元件呢。
在我的理解中，父子元件的關係構成也比較簡單。
使用vue-cli工具構建的專案中，我們經常會在一個元件中註冊引用另外一個元件。
Home.vue
<template>
<div class="home">
<p>這裡是Home元件</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.home{
border:1px solid #4488ff;
display: inline-block;
padding: 10px;
}
</style>
App.vue
<template>
<div id="app">
<p>這裡是app元件</p>
<!-- stpe3:使用 -->
<home></home>
</div>
</template>
<script>
// step1: 引入
import Home from './components/Home'
export default {
name: 'App',
// step2: 註冊
components: { Home }
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
display: inline-block;
border:1px solid orange;
padding: 10px;
}
</style>
在上面兩個元件中，我們在App元件中引入、註冊並使用了Home元件。
那在vue中，我們就可以稱 App元件為父元件，Home元件為子元件，這兩個元件就構成了父子關係。
這裡一定要注意的是引入、註冊、使用這三步都不可缺少。
否則這兩個元件無法構成父子關係，也無法使用後面總結的幾種通訊方式進行通訊。
瞭解了vue中父子元件的構成關係後，接下來我將為大家介紹父子元件之前是如何進行通訊。
二.props
vue中父子元件通訊的第一種方式是通過props屬性，並且是父元件向子元件通訊。
下面我們來實踐操作一下。
首先找到父元件中使用子元件的地方，為其新增上父元件需要傳遞給子元件的資料。
App.vue（省略部分未修改程式碼）
<template>
<div id="app">
<p>這裡是app元件</p>
<home
title="Vue中父子元件之間的通訊方式"
date="2020/03/05 14:25">
</home>
</div>
</template>
可以看到，這一步我們在使用子元件的地方添加了兩個需要傳遞給子元件的資料：title和date。
<home
title="Vue中父子元件之間的通訊方式"
date="2020/03/05 14:25">
</home>
下一步就是在子元件使用props接收這兩個引數。
Home.vue（省略部分未修改程式碼）
<script>
export default {
name: 'Home',
props: ['title','date']
}
</script>
最後一步，我們就可以在子元件中像使用vue data一樣使用title和date了。
Home.vue（省略部分未修改程式碼）
<template>
<div class="home">
<p>這裡是Home元件</p>
<p>title:{{title}}</p>
<p>date:{{date}}</p>
</div>
</template>
啟動專案後，瀏覽器檢視效果。
更多關於prop的用法請點選這裡。
三.$emit
vue中父子元件通訊的第二種方式是通過$emit方法，它是屬於子元件向父元件通訊。
$emit方法是vue的一個例項方法，它的用法如下：
其中第一個引數eventName稱為事件名稱。
事件名稱對應的事件是在父元件中通過v-on監聽的一個native DOM事件（可以理解是一個類似click這樣的自定義事件）。
當我們在子元件中執行$emit(eventName)時，就會觸發父元件中對應的event。
所以首先我們在子元件中使用$emit方法去編寫程式碼（不傳遞第二個引數），觸發父元件中的event。
Home.vue
<template>
<div class="home">
<p>這裡是Home元件</p>
<el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
<el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
btnClickHandler: function(param){
if(param == "Yes"){
this.$emit('sayYes');
}else if(param == "No"){
this.$emit('sayNo');
}
}
}
}
</script>
可以看到，在Home子元件中存在兩個button。
當點選[Yes] button時，會執行this.$emit('sayYes')，觸發父元件中的sayYes事件。
當點選[No] button時，會執行this.$emit('sayNo')，觸發父元件中的sayNo事件。
接著我們在父元件中實現對應的native DOM事件。
App.vue
<template>
<div id="app">
<p>這裡是app元件</p>
<home
v-on:sayYes='val="yes"'
v-on:sayNo='val="no"'>
</home>
<p>val: {{val}}</p>
</div>
</template>
<script>
import Home from './components/Home'
export default {
name: 'App',
data() {
return {
val: "default",
}
},
components: { Home },
}
</script>
其中sayYes和、sayNo就是在父元件中定義的native DOM事件。
<home
v-on:sayYes='val="yes"'
v-on:sayNo='val="no"'>
</home>
val是父元件中定義的一個data資料，預設值為'default'。
那在結合子元件的程式碼邏輯，我們知道會有如下的結果：
當點選[Yes] button時，會執行this.$emit('sayYes')，觸發父元件中的sayYes事件，在sayYes事件裡會將vue data中的val值修改為yes。
當點選[No] button時，會執行this.$emit('sayNo')，觸發父元件中的sayNo事件，在sayNo事件裡會將vue data中的val值修改為no。
瀏覽器中驗證一下我們的說法。
四.$parent
$parent是vue的一個例項屬性，它表示的就是當前元件的父例項。
假如父元件中有一個方法為sayYes，那麼在子元件中就可以直接使用this.$parent.sayYes去呼叫父元件的方法。
App.vue
<template>
<div id="app">
<p>這裡是app元件</p>
<home></home>
<p>val: {{val}}</p>
</div>
</template>
<script>
import Home from './components/Home'
export default {
name: 'App',
data() {
return {
val: "default",
}
},
components: { Home },
methods: {
sayYes: function() {
this.val = "yes";
},
sayNo: function() {
this.val = "no";
}
}
}
</script>
我們在父元件中定義了兩個method：sayYes和sayNo，邏輯分別是：將val的值改為yes；將val的值改為no。
接著就可以在子元件中使用this.$parent.sayYes和this.$parent.sayNo去呼叫父元件中對應的sayYes和sayNo方法了。
Home.vue
<template>
<div class="home">
<p>這裡是Home元件</p>
<el-button type="primary" v-on:click='btnClickHandler("Yes")'>Yes</el-button>
<el-button type="primary" v-on:click='btnClickHandler("No")'>No</el-button>
</div>
</template>
<script>
export default {
name: 'Home',
methods: {
btnClickHandler: function(param){
if(param == "Yes"){
this.$parent.sayYes();
}else if(param == "No"){
this.$parent.sayNo();
}
}
}
}
</script>
子元件中btnClickHandler方法的程式碼已經改為了this.$parent這種寫法。
那我們在看下結果。
五.總結
到此，vue中父子元件的通訊方式已經總結完畢了，分別總結了下面幾種方法：
第一種：父元件向子元件通訊-props屬性
第二種：子元件向父元件通訊-$emit方法
第三種：子元件向父元件通訊-$parent屬性
作者：小土豆biubiubiu
部落格園：www.cnblogs.com/HouJiao/
掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d
簡書：https://www.jianshu.com/u/cb1c3884e6d5
微信公眾號：土豆媽的碎碎念（掃碼關注，一起吸貓，一起聽故事，一起學習前端技術）
碼字不易，點贊鼓勵喲~
&n