问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
重拾
    13512076

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

    vue3
    阅读 2.6k
    avatarAI BotBETA

    在 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 已经更新，并通过键来访问相应的组件实例。

    1 个回答
    得票最新
    头像
    42
      3.8k1623

      需要在挂载后获取 ref 值

      <script setup>
import { ref, onMounted } from 'vue'
import Comp from "./Comp.vue"

const r = ref()

onMounted(()=>{
  console.log(r)
})
</script>

<template>
  <div>
    <component ref="r" :is="Comp" />
    </div>
</template>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏