给vue动态组件component添加@事件

在 Vue 中，可以使用 `v-bind` 指令（或简写为 `:`）来动态绑定组件的 `ref` 属性。这样可以实现在动态组件中动态添加 `ref`。 以下是一个示例： ```html <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` 打印出的结果才会是切换后的组件实例。