关于vue3.0项目如何在父组件中调用子组件方法踩的坑记录

项目开发过程中,免不了要在父组件中调用子组件中的方法,使用如下

在vue2项目

// 父组件
<Children ref="child"></Children>

<script>
	mounted() {
    
    
		this.$refs.child.XXX() // XX为子组件的一个方法名
	}
</script>

在vue3项目

// 父组件
<Children ref="child"></Children>
<script>
  import {
    
     onMounted, ref } from 'vue'
	setup() {
    
    
		const child = ref()// child要和子组件的ref值一致
		onMounted(() => {
    
    
			child.value.XX() // XX为子组件的一个方法名
		})
		return {
    
    
			child// 此处一定要return,否则获取到的child.value是undefined
		}
	}
</script>

猜你喜欢

转载自blog.csdn.net/qq_36877078/article/details/129725389