Vue 父子組件通訊

做者：小土豆biubiubiu

博客園：www.cnblogs.com/HouJiao/

掘金：juejin.im/user/58c61b…

簡書：www.jianshu.com/u/cb1c3884e…

微信公衆號：土豆媽的碎碎念（掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術）

碼字不易，點贊鼓勵喲~

父子組件的關係構成

本篇文章將要總結的是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>
複製代碼

啓動項目後，瀏覽器查看效果。

更多關於props的用法請 點擊這裏。

$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/

掘金：juejin.im/user/58c61b…

簡書：www.jianshu.com/u/cb1c3884e…

微信公衆號：土豆媽的碎碎念（掃碼關注，一塊兒吸貓，一塊兒聽故事，一塊兒學習前端技術）

碼字不易，點贊鼓勵喲~