$emit祖孙关系有什么办法？

Question

子组件需要向爷爷组件传递一个值，之前不知道是它爷爷就用$emit。调试了半天不行，后来发现不是他爸爸，而是它爷爷。
于是就用了that.$parent.$parent这样的方法，请问假如一定要用$emit有什么办法吗？

另外再问一个上面的两个方法都是后面跟着一个事件，而不是直接修改上层data的元素值。为毛要通过一个事件来修改元素值，而不是直接直接修改？是不是有其他办法能够直接修改还是官方就怎么设计的？有什么好处吗？

Answer 1

那当然是component-provide-inject了

通常，当我们需要从父组件向子组件传递数据时，我们使用 props。想象一下这样的结构：有一些深度嵌套的组件，而深层的子组件只需要父组件的部分内容。在这种情况下，如果仍然将 prop 沿着组件链逐级传递下去，可能会很麻烦。

对于这种情况，我们可以使用一对 provide 和 inject。无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。

vue2写法

• 父组件

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import MyMarker from './MyMarker.vue'

export default {
  components: {
    MyMarker
  },
  provide: {
    location: 'North Pole',
    geolocation: {
      longitude: 90,
      latitude: 135
    }
  }
}
</script>

• 子组件

<!-- src/components/MyMarker.vue -->
<script>
export default {
  inject: ['location', 'geolocation']
}
</script>

vue3写法

• 父组件

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide, reactive, ref } from 'vue'
import MyMarker from './MyMarker.vue

export default {
  components: {
    MyMarker
  },
  setup() {
    const location = ref('North Pole')
    const geolocation = reactive({
      longitude: 90,
      latitude: 135
    })

    provide('location', location)
    provide('geolocation', geolocation)
  }
}
</script>

• 子组件

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'

export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')

    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

更多可阅读Provide / Inject

Answer 2

有一种神秘的透传方式，不知少侠了解不了解：

 v-bind="$attrs" v-on="$listeners"

Answer 3

如果想在祖孙组件或多个没有关联的组件之间传递数据的话，我推荐使用事件中转，用法也很简单，只需给Vue的原型添加一个新的Vue对象作为事件总线，然后你就能很方便地在任意组件之间做数据通讯了。

// main.js
Vue.prototype.$bus = new Vue();
// A组件
this.$bus.$emit('event', {});
// B组件
this.$bus.$on('event', function(data) {
  console.dir(data);
});