【vue3】vue3在父组件中调用子组件中定义的methods

首先要区分子组件的setup的写法:

• 写法1：子组件的setup写在<script>标签上面，这样写的话，在父组件中引用子组件时，ts会报红，提示子组件没有被export，我讨厌报红，所以一般子组件我不这样写setup

// child.vue
<script lang="ts" setup>
import { defineExpose } from 'vue
const drawchart= () => {
	...
}
defineExpose({
	drawchart, 
})
<script>

注意：这样使用setup时，一定要用defineExpose暴露一下drawchart方法，否则父组件中根本拿不到

• 写法2：子组件的setup是单独写的，要return的

// child.vue
<script lang="ts">
	name: 'child',
	setup() {
		const drawchart= () => {
			...
		}
		
		return {
			drawchart,
		}
	}
</script>

注意：return就类似于上面的defineExpose，drawchart方法已经被暴露出来了，可以直接获取到

以下是父组件调用子组件中定义的methods：
父组件：

<template>
	<div id="wrap">
		// 子组件
		<requestLine ref="request_line" />
	</div>
</template>
<script lang="ts" setup>
import requestLine from './requestLine.vue'		// 引入子组件, vue3不需要在components中注册组件，直接引入即可

const request_line = ref(null)		// 注意ref定义的名称不能跟组件名一样，会报错

// request_line .value的值只有在onMounted或者nextTick里面才能拿到
onMounted(() => {
	// 调用子组件中的方法
	request_line .value.drawchart()
})
</script>

*获取变量的写法和methods一样