目錄

• 前言
• 示例
• 小結

前言

父子元件之間通過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
    },da
 
ta() {
      return {
        msg: '我是元件A中資料'
      }
    },provide: function() { //注入給子元件屬性和方法
      return {
        text: this.msg,getMethod: function() {
          console.log('執行根元件中的getMethod方法')
        }
      }
    }
  }http://www.cppcns.com
</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>
<http://www.cppcns.com/template>
<script>
  exporthttp://www.cppcns.com default {
    name: 'comC',inject: ['text','getMethod'] //text和getMethod是provide提供的名字
  }
</script>

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

執行，介面如下圖所示

小結

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

以上就是vue前端開發層次巢狀元件的通訊詳解的詳細內容，更多關於vwww.cppcns.comue層次巢狀元件通訊的資料請關注我們其它相關文章！