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

最新推荐文章于 2023-07-02 23:06:38 发布

笑毅

最新推荐文章于 2023-07-02 23:06:38 发布

阅读量215

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_36877078/article/details/129725389

版权

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

在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>