vue3没有$children了，那怎么获取子组件的实例。或者有什么代替方法

Question

vue3没有$children了，那怎么获取子组件的实例。或者有什么代替方法

场景：在Swiper父组件里对SwiperItem前后各添加一张图片,还有动态修改SwiperItem的样式

因为swiper渲染swiper-item用的是slot，所以没办法用ref

Answer 1

目前来看，vue3把this.$children给干掉了，但有个替代办法是子组件mounted()的时候，通过this.$parent调用父组件方法，把this传给父组件，这样父组件就能操作子组件了。

我今天试图把一个组件库迁到vue3，第一个组件就被这个问题给卡住了，翻了些vue3的组件库代码，没其它太好的办法。

Answer 2

使用ref获取子组件也行；

Answer 3

provider/inject 就可以实现了，目前我自己写的组件库就大量用到了这个特性，依赖注入在 React 社区一直很火，不知道为啥 Vue 社区喜欢直接 this.$children

Answer 4

楼主找到办法了吗...我这也遇到了这个问题...依赖注入只能在初始化的时候用，那要是有动态改变组件属性的功能...获取不到实例要怎么动态改变子组件的属性啊...

Answer 5

我试了一下vue3能获取到slot的ref啊

Answer 6

vue3中获得对模板内元素或组件实例的引用，使用 composition API 中的 ref 参考中文官网https://v3.cn.vuejs.org/guide/composition-api-template-refs.html#%E6%A8%A1%E6%9D%BF%E5%BC%95%E7%94%A8

Answer 7

我的场景是，父组件来使用子组件的生命周期，因为子组件是些三方库，不方便直接修改，vue2可直接 hook:mounted来处理，看了vue3 callhook 好像不会在emit类似事件了，目前也只能通过 ref 来获取子组件实例了，不知有没更好的办法。

const childRef = ref(null);
watch(childRef, () => {
    const childVm = widgetRef.value;
    // childVm.dosomething ....
});

Answer 8

可以试下使用动态slot Name，模拟children。

父组件：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

子组件：

setup(props, { slots }) {
 return () => Object.keys(slots).map((slotKey: string) => {
    return (
      <div>
         {slots[slotKey]?.()}
      <div>
    )
 })