vue前端開發層次嵌套組件的通信詳解

Posted on by

前言

vue父子組件之間通過props很容易的將父組件的值傳遞給子組件，如果一個組件嵌套很多層，每一層之間度需要同props進行傳值，很麻煩，且不易維護

示例

【示例】A組件中使用瞭B組件，B組件中使用瞭C組件，C組件需要使用A組件的數據text及使用A組件的方法getmethod。A組件代碼如下：

<template>
  <div>
    <P>這是A組件</P>
    <v-comb></v-comb>
  </div>
</template>
<script>
  import comB from '@/view/comB.vue'
  export default {
    name: 'comA',
    components: {
      'v-comb': comB
    },
    data() {
      return {
        msg: '我是組件A中數據'
      }
    },
    provide: function() { //註入給子組件屬性和方法
      return {
        text: this.msg,
        getMethod: function() {
          console.log('執行根組件中的getMethod方法')
        }
      }
    }
  }
</script>

使用關鍵字provide，將數據和方法暴露給子組件
B組件是A組件子組件，是C組件的父組件，代碼如下

<template>
  <div>
    <div>
      <P>這是B組件</P>
      <v-comc></v-comc>
    </div>
  </div>
</template>
<script>
  import comC from '@/view/comC.vue'
  export default {
    name: 'comB',
    components: {
      'v-comc': comC
    }
  }
</script>

C組件是A組件的孫子組件，C組件需要使用A組件的數據和方法，代碼如下：

<template>
  <div style="border:1px solid orange;color:orange;">
    <div>
      <P>這是C組件</P>
      <div>{{text}}</div>
      <button @click="getMethod">調用父組件方法</button>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'comC',
    inject: ['text', 'getMethod'] //text和getMethod是provide提供的名字
  }
</script>

這裡使用inject關鍵字，接收A組件暴露的信息，這裡特別註意， inject: []中接收名字必須與provide提供的名字完全一致。

運行，界面如下圖所示

在這裡插入圖片描述

小結

多層次組件嵌套通信，vue通過provide & inject兩個關鍵字完成父組件向子孫組件直接傳值，使用起來非常方便。存在問題子組件與父組件存在一種強耦合關系，不再萬不得已時不建議使用。

以上就是vue前端開發層次嵌套組件的通信詳解的詳細內容，更多關於vue層次嵌套組件通信的資料請關註WalkonNet其它相關文章！

推薦閱讀：