Vue-多級組件嵌套傳值

遇到多級組件嵌套傳值的時候我們想到的應該是

　　1.props 和 $emit (如果嵌套組件過多的話，會使代碼邏輯過於繁瑣) 

　　2. Vuex (一般用於大型項目中，只是用來傳值有點大材小用了)

　　3. Bus (建一個公共的js雙方傳值和獲取值，這種方法不能很好的實現事件監聽)

Vue 2.4版本開始，新增了$attrs 和 $listeners方法用於隔代傳值

　　$attrs: 用於傳遞屬性      inheritAttrs: false,(這個屬性可以讓傳遞的屬性不顯示在標簽上)

　　$listeners: 用於傳遞方法

搞個案例

// 祖組件
<template>
  <div>
    <child1
      :p-child1="child1"
      :p-child2="child2"
      :p-child3="child3"
      v-on:test1="onTest1"
      v-on:test2="onTest2"
    ></child1>
  </div>
</template>
<script>
import Child1 from './Attrs/Child1.vue';  // 引入
export default {
  components: {
    Child1
  },
  data() {
    return {
      child1: 'child1',
      child2: 'child2',
      child3: 'child3'
    }
  },
  methods: {
    onTest1() {
      console.log('test1 running...')
    },
    onTest2() {
      console.log('test2 running');
    }
  }
}
</script>

// 父組件
<template>
    <div class="child-1">
        <p> in child1: </p>
        <p>props: {{pChild1}} </p>　　// 步驟3：步驟1 props獲取到的值在此處展示
        <p>$attrs: {{$attrs}} </p>  // 步驟4： 除去props展示的其他沒有展示的屬性
        <hr>
        <child2 v-bind="$attrs" v-on="$listeners"></child2>  // 步驟5：沒有展示的屬性使用 v-bind="$attrs" 傳遞屬性   v-on="$listeners" 傳遞方法
    </div>
</template>
<script>
import Child2 from './Child2.vue';
export default {
    components: {
        Child2
    },
    data() {
        return {

        }
    },
    props: ['pChild1'],  // 步驟1：獲取需要用到的從祖組件傳遞過來的屬性，
    inheritAttrs: false,  // 步驟2：設置為false，使得傳遞的屬性不在div標簽上展示
    mounted() {
        this.$emit('test1');
    }
}
</script>

// 子組件
<template>
    <div class="child-2">
        <p>in child2:</p>
        <p>props: {{pChild2}} </p>  // 步驟3：props獲取到的屬性值用於展示
        <p>$attrs: {{$attrs}} </p>  // 步驟4：傳遞的沒有被props所接收的其他屬性
    </div>
</template>
<script>
export default {
    props: ["pChild2"],  // 步驟1: 獲取用於展示的傳遞過來的屬性
    data() {
        return {};
    },
    inheritAttrs: false,  // 步驟2：設置為false，使得傳遞的屬性不在標簽上展示
    mounted() {
        this.$emit('test2')
    }
}
</script>

** 給大家展示一下

inheritAttrs：false 的時候

 

 inheritAttrs: true 的時候 (因為在父組件中 props：['pChild1'])  所以只展示沒有被獲取的

最后的結果展示