vue中用ref 可以引用元素或组件中的数据,静态绑定用法非常简单,例如:this.$refs["xxx"].func() 或this.$refs["xxx"].msg 父组件调用子组件中的方法或数据。
如果在父组件中用v-for循环渲染子组件,并且需要在父组件获取所有子组件中的数据,那么就需要动态绑定ref,代码如下
<template>
<Base>
<div>
<div v-for="item in itemList" :key="item.id">
<child :ref="`child${item.id}`"></child>
</div>
</div>
<el-button @click="onBtn">结果</el-button>
</Base>
</template>
<script>
import child from "./child.vue";
export default {
components: {
child,
},
data() {
return {
itemList: [
{
id: 0,
},
{
id: 1,
},
{
id: 2,
},
],
};
},
methods: {
onBtn(){
this.itemList.forEach(item => {
console.log('item is: ', this.$refs[`child${item.id}`][0].msg)
})
}
},
};
</script>
<style lang="scss" scoped>
</style>
:注意父组件在取得子组件数据写法如下:this.$refs[`child${item.id}`][0].msg