下面演示均为使用 setup 语法糖的情况!

参考网址:https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose

一、父组件调用子组件方法

子组件需要使用defineExpose对外暴露方法,父组件才可以调用!

1.子组件

我是子组件// 第一步:定义子组件的方法const hello = (str: string) => {console.log('子组件的hello方法执行了--' + str)}// 第二部:暴露方法defineExpose({hello})

2.父组件

import { ref } from 'vue';import Child from '../../components/child.vue';// 二:定义与 ref 同名变量const childRef = ref()// 三、函数const getChild = () => {// 调用子组件的方法或者变量,通过valuechildRef.value.hello("hello world!");}

3.测试结果

二、子组件调用父组件方法

1.父组件

import Child from '../../components/child.vue';const handle = () => {console.log('子组件调用了父组件的方法')}

2.子组件

我是子组件const emit = defineEmits(["sayHello"])const say = () => {emit('sayHello')}

3.测试结果

今天的分享就到这里啦~~

如有错误,欢迎随时雅正。