vue component动态组件怎么动态添加ref

在 Vue 中，可以使用 `v-bind` 指令（或简写为 `:`）来动态绑定组件的 `ref` 属性。这样可以实现在动态组件中动态添加 `ref`。

以下是一个示例：

<template>
  <div>
    <component :is="currentComponent" ref="dynamicRef"></component>
    <button @click="changeComponent">切换组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    changeComponent() {
      this.currentComponent = 'ComponentB';
      // 在组件切换后，可以通过 this.$refs.dynamicRef 来访问当前组件的实例
      console.log(this.$refs.dynamicRef);
    }
  },
  components: {
    ComponentA: {
      template: '<div>组件A</div>'
    },
    ComponentB: {
      template: '<div>组件B</div>'
    }
  }
};
</script>

在上述示例中，我们通过 `v-bind` 动态绑定了 `component` 的 `is` 属性，根据 `currentComponent` 的值来切换不同的组件。同时，我们给 `component` 添加了 `ref="dynamicRef"`，这样就可以通过 `this.$refs.dynamicRef` 来访问当前组件的实例。

注意：动态添加 `ref` 只能在组件渲染后才能生效，所以在上述示例中，在点击按钮切换组件后，通过 `this.$refs.dynamicRef` 打印出的结果才会是切换后的组件实例。