Vue3父子组件相互调用方法

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

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

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

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

1.子组件

3. <script lang="ts" setup>
4. // 第一步：定义子组件的方法
5. const hello = (str: string) => {
6. console.log('子组件的hello方法执行了--' + str)
7. }
8. // 第二部：暴露方法
9. defineExpose({
10. hello
11. })
12. script>

2.父组件

3. <script lang="ts" setup>
4. import { ref } from 'vue';
5. import Child from '../../components/child.vue';
7. // 二：定义与 ref 同名变量
8. const childRef = ref ()
10. // 三、函数
11. const getChild = () => {
12. // 调用子组件的方法或者变量，通过value
13. childRef.value.hello("hello world！");
14. }
15. script>

3.测试结果

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

1.父组件

3. <script lang="ts" setup>
4. import Child from '../../components/child.vue';
6. const handle = () => {
7. console.log('子组件调用了父组件的方法')
8. }
9. script>

2.子组件

3. <script lang="ts" setup>
4. const emit = defineEmits(["sayHello"])
6. const say = () => {
7. emit('sayHello')
8. }
9. script>

3.测试结果

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

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