如何解决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();
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。