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

海洋之蓝
  • 130

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

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

回复
阅读 385
3 个回答

那当然是component-provide-inject

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

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

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

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

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

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

 v-bind="$attrs" v-on="$listeners"
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏