子组件方法 child.vue

javascript"><div>{{msg}}</div>

props: {
	msg: {
		type: String,
		default: ''
	}
},
methods: {
	getData () {
		console.log(msg)
	}
}

父组件 fa.vue

javascript">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)
			})
		})	
	}
}