子组件方法 child.vue
<div>{{msg}}</div>
props: {
msg: {
type: String,
default: ''
}
},
methods: {
getData () {
console.log(msg)
}
}
父组件 fa.vue
1.引入子组件
import child from './child'
data () {
return {
list: [
{
msg: 'hhhh',
index: 0
},
{
msg: 'xxxx',
index: 0
}
]
}
components: {
child
}
2.页面使用,多次调用方法,可以渲染多个子组件
<child v-for="(item, i) in list" :key="index" :msg="item.msg" ref="childRef"></child>
3. 多次调用子组件方法
mounted () {
this.showData()
}
methods: {
showData () {
this.$nextTick(() => {
//arr 页面循环渲染的子组件,多个为数组
const arr = this.$refs['childRef']
arr.forEach((item) => {
// item 获取到的就是页面循环渲染的子组件
setTimeout(() => {
// this.$refs.子组件ref.子组件方法
item.getData() // hhhh xxxx
}, 1000)
})
})
}
}