Vue3中如何正确访问插槽传入的子组件并解决调用方法的this指向异常

你之前的调用方式本质是直接访问组件定义上的方法原型，没有绑定子组件实例上下文，因此方法内部this指向错误，自然无法访问$refs、$el等实例属性。Vue3中this.$slots.default()返回的是VNode数组，vnode.type.methods存储的是方法的原始定义，和实际挂载的组件实例无关。

方案1：直接从VNode获取挂载后的组件实例（快速修复） #

在组件挂载完成的生命周期（如onMounted、updated）中操作VNode的component属性，拿到实际的组件实例代理后再调用方法：

// 选项式API写法
mounted() {
  const slotVNodes = this.$slots.default()
  const targetChildVNode = slotVNodes[1]
  // 确认是组件VNode且已挂载完成
  if (targetChildVNode.component) {
    // component.proxy 就是子组件的完整实例，和Vue2拿到的实例行为一致
    targetChildVNode.component.proxy.methodName()
  }
}

// 组合式API写法
import { useSlots, onMounted } from 'vue'
const slots = useSlots()

onMounted(() => {
  const slotVNodes = slots.default?.() || []
  const targetChildVNode = slotVNodes[1]
  if (targetChildVNode?.component) {
    targetChildVNode.component.proxy.methodName()
  }
})

注意事项 #

如果子组件使用<script setup>语法糖，默认所有内部属性和方法都是私有的，需要手动用defineExpose暴露需要被外部访问的内容：

// 子组件代码（<script setup>）
const methodName = () => {
  // 方法逻辑
}
defineExpose({
  methodName
})

方案2：动态绑定ref（更稳定，推荐） #

如果担心直接操作VNode内部属性会随Vue版本变动失效，可以通过动态绑定ref的方式收集插槽内的子组件实例：

// 父组件选项式API示例
data() {
  return {
    childRefs: []
  }
},
render() {
  const slotVNodes = this.$slots.default()
  // 给每个组件VNode绑定ref
  slotVNodes.forEach((vnode, index) => {
    if (vnode.type.name === '你需要的组件名' || vnode.component) {
      vnode.ref = el => this.childRefs[index] = el
    }
  })
  return h('div', slotVNodes)
},
mounted() {
  // 直接从ref数组取实例调用方法
  this.childRefs[1].methodName()
}

内容的提问来源于stack exchange，提问作者Mykhailo Galenda