同一个ref变量引用多个组件
时间: 2023-07-12 13:39:05 浏览: 41
在Vue3中,如果我们想要将同一个 `$refs` 引用用于多个组件,可以使用 `ref` 配合 `v-for` 指令来实现。示例如下:
```
<template>
<div>
<div v-for="(item, index) in items" :key="index">
<my-component ref="myComponent"></my-component>
<button @click="handleClick(index)">访问组件-{{index}}</button>
</div>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
data() {
return {
items: [1, 2, 3]
}
},
methods: {
handleClick(index) {
const myComponent = this.$refs.myComponent[index];
console.log(myComponent);
}
}
}
</script>
```
在上面的例子中,我们使用 `v-for` 指令遍历 `items` 数组,并为每个 `my-component` 组件添加了一个 `ref` 属性。然后,我们在 `handleClick` 方法中使用 `this.$refs.myComponent[index]` 访问特定的组件,并将其打印到控制台中。