快捷導(dǎo)航

vue前端開(kāi)發(fā)層次嵌套組件的通信詳解

更新時(shí)間：2021年10月09日 17:03:15 作者：guoyp2126

vue通過(guò)provide & inject兩個(gè)關(guān)鍵字完成父組件向子孫組件直接傳值，很像子類能夠使用父類的屬性一樣方便。provide & inject一般用于多層之間的傳值，兩層之間還是使用props進(jìn)行

前言

vue父子組件之間通過(guò)props很容易的將父組件的值傳遞給子組件，如果一個(gè)組件嵌套很多層，每一層之間度需要同props進(jìn)行傳值，很麻煩，且不易維護(hù)

示例

【示例】A組件中使用了B組件，B組件中使用了C組件，C組件需要使用A組件的數(shù)據(jù)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中數(shù)據(jù)'
      }
    },
    provide: function() { //注入給子組件屬性和方法
      return {
        text: this.msg,
        getMethod: function() {
          console.log('執(zhí)行根組件中的getMethod方法')
        }
      }
    }
  }
</script>

使用關(guān)鍵字provide，將數(shù)據(jù)和方法暴露給子組件
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組件的數(shù)據(jù)和方法，代碼如下：

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

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

運(yùn)行，界面如下圖所示

在這里插入圖片描述