vue3内置组件<component>可以绑定ref吗？

Question

我有个需求需要使用动态组件展示，但是我挂载ref到component上，好像不会立即起作用，即使我使用nextTick？所以component是否支持绑定ref？

Answer 1

在 Vue 3 中，<component> 作为一个内置的动态组件，确实可以绑定 ref。ref 在 Vue 中用于注册一个引用信息，你可以通过这个引用来直接访问 DOM 元素或子组件实例。

但是，需要注意的是，由于 <component> 是动态组件，它会在其 is 属性指定的组件切换时销毁和重建。因此，如果你尝试在动态组件上绑定 ref，你实际上是在绑定到当前激活的组件实例上，而不是 <component> 元素本身。

对于你提到的挂载 ref 到 component 上似乎不会立即起作用的问题，这可能是由于动态组件的重建机制。当你更改 <component> 的 is 属性时，旧的组件实例会被销毁，新的组件实例会被创建，因此任何绑定到旧实例的 ref 都会失效。

如果你需要在动态组件上使用 ref，并且希望确保 ref 在组件切换时仍然有效，你可以考虑在父组件中维护一个映射关系，将 ref 的键与动态组件的 key 属性相关联。这样，即使动态组件切换，你也可以通过键来访问正确的组件实例。

示例代码：

<template>  <div>    <component      v-for="item in items"      :key="item.id"      :is="item.component"      ref="dynamicComponents"    ></component>  </div></template><script>export default {  data() {    return {      items: [        { id: 1, component: 'ComponentA' },        { id: 2, component: 'ComponentB' },        // ...      ],      dynamicComponents: {},    };  },  mounted() {    this.$nextTick(() => {      // 在这里可以通过 this.dynamicComponents 访问动态组件实例      console.log(this.dynamicComponents[1]); // 访问 id 为 1 的动态组件实例    });  },};</script>

在上面的示例中，我们使用 v-for 指令来渲染多个动态组件，并使用 :key 属性为每个组件分配一个唯一的键。然后，我们使用 ref 属性将动态组件的引用绑定到 dynamicComponents 对象上。在 mounted 钩子中，我们使用 $nextTick 来确保 DOM 已经更新，并通过键来访问相应的组件实例。