vue3传值

https://blog.csdn.net/H_114/article/details/122420402?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-122420402-blog-124122242.pc_relevant_3mothn_strategy_recovery&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1-122420402-blog-124122242.pc_relevant_3mothn_strategy_recovery&utm_relevant_index=1

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去接收否则无法调用，个人比较喜欢语法糖，写起来真是快捷又方便....如有错误欢迎指正互相学习，如果觉得有用就留个赞再走吧~
————————————————
版权声明：本文为CSDN博主「Beast_H」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/H_114/article/details/122420402