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去接收否则无法调用，个人比较喜欢语法糖，写起来真是快捷又方便....如有错误欢迎指正互相学习，如果觉得有用就留个赞再走吧~
?