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

 

  • 38
    点赞
  • 94
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue 3.0 中,父子组件之间的通讯可以通过 props 和 emit 实现。 1. 组件组件传递数据: 在组件中使用组件时,可以通过 props 将数据传递给组件。具体实现如下: ```vue <template> <div> <child-component :message="parentMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { parentMessage: 'Hello from parent' } }, components: { ChildComponent } } </script> ``` 在组件中,可以通过 props 接收组件传递过来的数据。具体实现如下: ```vue <template> <div> {{ message }} </div> </template> <script> export default { props: { message: String } } </script> ``` 2. 组件组件传递数据: 在组件中,可以使用 emit 触发一个自定义事件,并向组件传递数据。具体实现如下: ```vue <template> <div> <button @click="sendMessage">Send Message</button> </div> </template> <script> export default { data() { return { message: 'Hello from child' } }, methods: { sendMessage() { this.$emit('message', this.message) } } } </script> ``` 在组件中使用组件时,可以通过 v-on 监听组件触发的自定义事件,并在事件处理函数中获取组件传递过来的数据。具体实现如下: ```vue <template> <div> <child-component @message="handleMessage"></child-component> <div>{{ receivedMessage }}</div> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { data() { return { receivedMessage: '' } }, components: { ChildComponent }, methods: { handleMessage(message) { this.receivedMessage = message } } } </script> ``` 以上就是 Vue 3.0 中父子组件之间通讯的实现方式。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值