vue3项目之defineEmits 实现父子组件通信

最新推荐文章于 2024-07-10 11:06:39 发布

cocoonne

最新推荐文章于 2024-07-10 11:06:39 发布

阅读量359

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_63907100/article/details/129209751

版权

defineEmits 实现父子组件通信

父组件绑定事件：@increase="handleIncrease"
父组件回调函数：const handleIncrease = (num: number) => {}
子组件定义 emit：

// ts 专有
const emit= defineEmits<{
    (e: 'increase', num: number): void
}>()

子组件调用 emit

emits('increase', 1);

父组件

<template>
  <section class="parent">
    <childVue :num="nums" @increase="handleIncrease"></childVue>
  </section>
</template>

<script setup>
  import childVue from './child.vue';
  import { ref } from 'vue';
  const nums = ref(0);
    
  // 回调函数
  const handleIncrease = (num: number) => {
    nums.value += num;
  };
</script>

子组件

<template>
  <section class="box" @click="handelClick">{{ num }}</section>
</template>

<script setup>
// ts 专有
const emit= defineEmits<{
    (e: 'increase', num: number): void
}>()
            
const handelClick = () => {
    emits('increase', 1);
};
</script>