Vue 父子組件通信

 

　　

 

作者：小土豆

博客園：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屬性

　　

作者：小土豆

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

掘金：https://juejin.im/user/58c61b4361ff4b005d9e894d

簡書：https://www.jianshu.com/u/cb1c3884e6d5

微信公眾號：不知名寶藏程序媛(關注"不知名寶藏程序媛"免費領取前端電子書籍。文章公眾號首發，關注公眾號第一時間獲取最新文章。)

碼字不易，點贊鼓勵喲~