如何理解vue前端開發層次嵌套組件的通信

本篇內容主要講解“如何理解vue前端開發層次嵌套組件的通信”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“如何理解vue前端開發層次嵌套組件的通信”吧!

目錄

• 前言

• 示例

• 小結

前言

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 >
    <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前端開發層次嵌套組件的通信”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！