Vue3 Options API插槽子组件数据更新后模板不渲染问题求助

1. 正确获取插槽内的组件实例 #

直接用$refs拿插槽里的组件会得到DOM节点，因为插槽内容是父组件渲染的，不属于ComponentA的直接子组件。要拿到组件实例，得从插槽的vnode里取：

// ComponentA 的 methods 方法
fireComponentAMethod() {
  // 获取默认插槽的vnode列表
  const slotNodes = this.$slots.default?.() || [];
  slotNodes.forEach(node => {
    // 组件实例存在于 node.component.proxy
    if (node.component) {
      const childInstance = node.component.proxy;
      // 校验目标组件（比如ComponentB）
      if (childInstance.$options.name === 'ComponentB') {
        childInstance.fireComponentBMethod();
      }
    }
  });
}

2. 确保ComponentB的数据是响应式的 #

控制台显示isValueSet为true但模板不更新，大概率是这个变量没做响应式处理：

// ComponentB 的代码
export default {
  name: 'ComponentB',
  data() {
    return {
      isValueSet: false // 必须在data里初始化，才会被Vue转为响应式
    };
  },
  methods: {
    fireComponentBMethod() {
      this.isValueSet = true;
      console.log(this.isValueSet); // 这里输出true的话，模板就会同步更新
    }
  }
}

如果是后续动态添加的属性，得用this.$set(target, propertyName, value)来确保响应式，但Options API里只要在data里声明就没问题。

3. 更优雅的解耦方案：用事件通信 #

直接操作子组件实例耦合性太高，推荐用自定义事件传递触发信号：

<!-- 父组件模板 -->
<ComponentA @trigger-component-b="callBMethod">
  <ComponentB ref="componentB"></ComponentB>
</ComponentA>

// 父组件 methods
callBMethod() {
  this.$refs.componentB.fireComponentBMethod();
}

// ComponentA 的 methods
fireComponentAMethod() {
  this.$emit('trigger-component-b');
}

内容的提问来源于stack exchange，提问作者Kevin Kopf