Vue：在渲染的命名插槽内访问 Vue 组件方法 this.$children

问题描述

如何访问在组件的命名槽中呈现的 Vue 组件的功能？

我有以下结构：

ParentComponent.vue

...
<util-component>
      <template v-slot:0>
        <child-component/>
      </template> 
      <template v-slot:1>
        //Another component,and so on
      </template> 
</util-component>
...

UtilComponent.vue

...
<div v-for="(comp,index) in components" :key="index">
  <slot :name="index" ></slot>
</div>
...

ChildComponent.vue

...
methods: {
   myFunction () { // do something } 
}
...

在 UtilComponent 中，我想访问 ChildComponent 的 myFunction()（单击按钮时，因此不在安装时）。我曾尝试在 UtilComponent 中使用 this.$slots[0] 但它只给了我一个 VNode 没有我需要的属性（数据和函数）。 this.$slots[0].context 给了我完整的父组件。使用 this.$slots[0][0].context.$children[0].$children[1] 我实际上可以访问 ChildComponent 及其函数，但这似乎很迂回（获取渲染插槽的父级，然后获取该父级的子级的子级...）

是否有更好的方法从提供插槽的组件（此处为 ChildComponent）访问在插槽（此处为 UtilComponent）内呈现的组件（的函数）？

解决方法

你可以给他们一个ref，比如：

<util-component>
      <template v-slot:0>
        <child-component ref="child1"/>
      </template> 
      <template v-slot:1>
        <child-component ref="child2"/>
      </template> 
</util-component>

然后使用this.$refs.child1.myFunction()调用组件方法

,

this.$children

您可以使用 this.$children 中的 <util-component> 访问其带槽的子组件。

假设每个孩子都有一个名为 myMethod 的方法：

Vue.component('child-component',{
  template: `<div class="child">Child</div>`,methods: {
    myMethod() {
      console.log('hi')
    }
  }
})

在 <util-component> 中，您可以遍历 this.$children，它可以访问带槽的组件，并且您可以在每个组件上访问该方法：

methods: {
  accessChildren() {
    // Loop through each child component and call its function
    this.$children.forEach(child => {
      child.myMethod();
    });
  }
}