组件之间嵌套传值最顶层和最底层怎么传

provide inject

成对出现： provide 和 inject 是成对出现的

作用：用于父组件向子孙组件传递数据

使用方法：

• provide 在父组件中, 返回要传给下级的数据
• inject 在需要使用这个数据的子孙组件中注入数据。（不论组件层次有多深）

父组件

export default {
  provide() {
    return {
      value: this.value, // 共享给子孙组件的数据
    }
  },
  data() {
    return {
      value: '父组件的数据',
      money: 100,
    }
  },
}

子孙组件

export default {
    inject: ['value'],
    props: {
        ...
    }
}

$attrs

$listeners

在 Vue 2.4 版本中加⼊的 $attrs 和 $listeners 可以用来作为跨级组件之间的通信机制。 (父传孙)

父组件

<template>
  <div>
    <my-child1 :money="100" desc='你好哇' @test1="fn1" @test2="fn2"></my-child1>
  </div>
</template>

子组件

<template>
  <div class="my-child1">
    <!-- $attrs => { "money": 100, "desc": "你好哇" } -->
    <div>{{ $attrs }}</div>
    <my-child2 v-bind="$attrs" v-on="$listeners"></my-child2>
  </div>
</template>

<script>
import MyChild2 from './my-child2'
export default {
  created() {
    console.log(this.$listeners)
  },
  components: {
    MyChild2,
  },
}
</script>

孙组件

<template>
  <div>
    我是child2 - {{ money }} - {{ desc }}
    <button @click="clickFn">按钮</button>
  </div>
</template>

<script>
export default {
  props: ['money', 'desc'],
  methods: {
    clickFn () {
      this.$emit('test1', '嘎嘎')
      this.$emit('test2', '嘿嘿')
    }
  }
}
</script>