腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

如何用Vue實(shí)現(xiàn)父子組件通信

更新時(shí)間：2021年05月11日 08:55:06 作者：小土豆biubiubiu

這篇文章主要介紹了如何用Vue實(shí)現(xiàn)父子組件通信，對(duì)Vue感興趣的同學(xué)，可以參考下

一、父子組件的關(guān)系構(gòu)成

本篇文章將要總結(jié)的是Vue中父子組件之間的通信方式。

那在vue中父子組件之間的關(guān)系是怎么構(gòu)成的呢，或者說(shuō)哪個(gè)組件可以稱為是父組件，哪個(gè)組件又可以稱為是子組件呢。

在我的理解中，父子組件的關(guān)系構(gòu)成也比較簡(jiǎn)單。

使用vue-cli工具構(gòu)建的項(xiàng)目中，我們經(jīng)常會(huì)在一個(gè)組件中注冊(cè)引用另外一個(gè)組件。

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: 注冊(cè)
  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>

在上面兩個(gè)組件中，我們?cè)贏pp組件中引入、注冊(cè)并使用了Home組件。

那在vue中，我們就可以稱 App組件為父組件，Home組件為子組件，這兩個(gè)組件就構(gòu)成了父子關(guān)系

這里一定要注意的是引入、注冊(cè)、使用這三步都不可缺少。

否則這兩個(gè)組件無(wú)法構(gòu)成父子關(guān)系，也無(wú)法使用后面總結(jié)的幾種通信方式進(jìn)行通信。

了解了vue中父子組件的構(gòu)成關(guān)系后，接下來(lái)我將為大家介紹父子組件之前是如何進(jìn)行通信。

二、props

vue中父子組件通信的第一種方式是通過(guò)props屬性，并且是父組件向子組件通信。

下面我們來(lái)實(shí)踐操作一下。

首先找到父組件中使用子組件的地方，為其添加上父組件需要傳遞給子組件的數(shù)據(jù)。

App.vue（省略部分未修改代碼）

<template>
  <div id="app">
    <p>這里是app組件</p>
    <home
        title="Vue中父子組件之間的通信方式"
        date="2020/03/05 14:25">
    </home>
  </div>
</template>

可以看到，這一步我們?cè)谑褂米咏M件的地方添加了兩個(gè)需要傳遞給子組件的數(shù)據(jù)：title和date。

<home
     title="Vue中父子組件之間的通信方式"
     date="2020/03/05 14:25">
</home>

下一步就是在子組件使用props接收這兩個(gè)參數(shù)。

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>

啟動(dòng)項(xiàng)目后，瀏覽器查看效果。

三、$emit

vue中父子組件通信的第二種方式是通過(guò)$emit方法，它是屬于子組件向父組件通信。

$emit方法是vue的一個(gè)實(shí)例方法，它的用法如下：

其中第一個(gè)參數(shù)eventName稱為事件名稱。

事件名稱對(duì)應(yīng)的事件是在父組件中通過(guò)v-on監(jiān)聽(tīng)的一個(gè)native DOM事件（可以理解是一個(gè)類似click這樣的自定義事件）。

當(dāng)我們?cè)谧咏M件中執(zhí)行$emit(eventName)時(shí)，就會(huì)觸發(fā)父組件中對(duì)應(yīng)的event。

所以首先我們?cè)谧咏M件中使用$emit方法去編寫(xiě)代碼（不傳遞第二個(gè)參數(shù)），觸發(fā)父組件中的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子組件中存在兩個(gè)button。

當(dāng)點(diǎn)擊[Yes] button時(shí)，會(huì)執(zhí)行this.$emit('sayYes')，觸發(fā)父組件中的sayYes事件。

當(dāng)點(diǎn)擊[No] button時(shí)，會(huì)執(zhí)行this.$emit('sayNo')，觸發(fā)父組件中的sayNo事件。

接著我們?cè)诟附M件中實(shí)現(xiàn)對(duì)應(yīng)的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是父組件中定義的一個(gè)data數(shù)據(jù)，默認(rèn)值為'default'。

那在結(jié)合子組件的代碼邏輯，我們知道會(huì)有如下的結(jié)果：

當(dāng)點(diǎn)擊[Yes] button時(shí)，會(huì)執(zhí)行this.$emit('sayYes')，觸發(fā)父組件中的sayYes事件，在sayYes事件里會(huì)將vue data中的val值修改為yes。

當(dāng)點(diǎn)擊[No] button時(shí)，會(huì)執(zhí)行this.$emit('sayNo')，觸發(fā)父組件中的sayNo事件，在sayNo事件里會(huì)將vue data中的val值修改為no。

瀏覽器中驗(yàn)證一下我們的說(shuō)法。

四、$parent

$parent是vue的一個(gè)實(shí)例屬性，它表示的就是當(dāng)前組件的父實(shí)例。

假如父組件中有一個(gè)方法為sayYes，那么在子組件中就可以直接使用this.$parent.sayYes去調(diào)用父組件的方法。

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>

我們?cè)诟附M件中定義了兩個(gè)method：sayYes和sayNo，邏輯分別是：將val的值改為yes；將val的值改為no。

接著就可以在子組件中使用this.$parent.sayYes和this.$parent.sayNo去調(diào)用父組件中對(duì)應(yīng)的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方法的代碼已經(jīng)改為了this.$parent這種寫(xiě)法。

那我們?cè)诳聪陆Y(jié)果。