vue3.0 父子组件通讯之调用方法，含setup语法糖（全网最详细）

tips：关于组件传值大同小异，如果需要可以访问我的另一篇博客

vue3+ts+vite项目三种形式父子组件传值的方法（setup(){}、script-setup语法糖、provide和inject）_H_114的博客-CSDN博客

一、常规方式（setup（）{}写法）

1.父组件调用子组件内部的方法

父组件--编写环境携带Typescript没有使用的小伙伴可以忽略....

<template>
  <div>
    我是父组件
    <button @click="FatherClick">父组件按钮</button>
    <div>----------华丽的分割线-----------</div>
    <Childs ref="childsDom"></Childs>
  </div>
</template>

<script lang="ts">
import Childs from "./childs.vue";
import { ref } from "vue";
export default {
  name: "",
  components: { Childs },
  setup(props, context) {
    const childsDom: any = ref(null);
    const FatherClick = () => {
      childsDom.value.handelClick();
      console.log(childsDom.value);
    };
    return {
      FatherClick,
      childsDom,
    };
  },
};
</script>

<style scoped></style>

子组件

<template>
  <div>
    <button>我是子组件按钮</button>
  </div>
</template>

<script lang="ts">
export default {
  setup() {
    const handelClick = () => {
      console.log("@子组件----我被调用了");
    };
    return {
      handelClick,
    };
  },
};
</script>

<style scoped></style>

观看控制台我们可以获取到Childs的DOM节点并且展开能够看见我们在子组件内部定义的方法，那我们就可以调用他，关于获取DOM需要注意放在合适的生命周期当中避免获取不到该DOM节点

 总结：父组件调用子组件用到的是ref绑定获取DOM节点从而来调用，需要注意的两个点是1.注意ref获取要在合适的生命周期当中（等到DOM加载完成获取）2.事件方法必须要return出去否则无法在实例上找到方法

2.子组件调用父组件内部的方法

父组件

<template>
  <div>
    我是父组件
    <button>父组件按钮</button>
    <div>----------华丽的分割线-----------</div>
    <Childs @FatherClick="FatherClick"></Childs>
  </div>
</template>

<script lang="ts">
import Childs from "./childs.vue";
import { ref } from "vue";
export default {
  name: "",
  components: { Childs },
  setup(props, context) {
    const FatherClick = () => {
      console.log('@父组件----我被调用了');
    };
    return {
      FatherClick,
    };
  },
};
</script>

<style scoped></style>

子组件

<template>
  <div>
    <button @click="handelClick">我是子组件按钮</button>
  </div>
</template>

<script lang="ts">
export default {
  emits: ["FatherClick"],
  setup(props, context) {
    const handelClick = () => {
      context.emit("FatherClick");
    };
    return {
      handelClick,
    };
  },
};
</script>

<style scoped></style>

 观看控制台得到结果

 总结：子组件调用父组件用到的方法是context，需要注意的是：1.方法需要被emits接收否则无法调用2.方法需要return出去

二、语法糖写法<script setup></script>

1.父组件调用子组件内部的方法

父组件

<template>
  <div>
    我是父组件
    <button @click="FatherClick">父组件按钮</button>
    <div>----------华丽的分割线-----------</div>
    <Childs ref="ChildsDom"></Childs>
  </div>
</template>

<script setup lang="ts">
import Childs from "./childs.vue";
import { ref } from "vue";
const ChildsDom: any = ref(null);
const FatherClick = () => {
  ChildsDom.value.handelClick();
  console.log(ChildsDom.value);
};
</script>

<style scoped></style>

子组件

<template>
  <div>
    <button>我是子组件按钮</button>
  </div>
</template>

<script setup lang="ts">
const handelClick = () => {
  console.log("@子组件----我被调用了");
};
defineExpose({
  handelClick,
});
</script>

<style scoped></style>

通过控制台我们可以看见调用成功了并且在ChildsDom这个节点身上有handelClick方法的存在 

总结：语法糖模式唯一一点需要注意的是要用defineExpose将我们的函数暴露出去否则我们在实例上无法获得该方法

2.子组件调用父组件内部的方法

父组件

<template>
  <div>
    我是父组件
    <button>父组件按钮</button>
    <div>----------华丽的分割线-----------</div>
    <Childs @FatherClick="FatherClick"></Childs>
  </div>
</template>

<script setup lang="ts">
import Childs from "./childs.vue";
import { ref } from "vue";
const ChildsDom: any = ref(null);
const FatherClick = () => {
  console.log("@父组件----我被调用了");
};
</script>

<style scoped></style>

子组件

<template>
  <div>
    <button @click="handelClick">我是子组件按钮</button>
  </div>
</template>

<script setup lang="ts">
const emits = defineEmits(["FatherClick"]);
const handelClick = () => {
  emits("FatherClick");
};
</script>

<style scoped></style>

 总结：语法糖模式需要注意在子组件内也需要emits去接收否则无法调用，个人比较喜欢语法糖，写起来真是快捷又方便....如有错误欢迎指正互相学习，如果觉得有用就留个赞再走吧~