vue3-emit的使用

Fever_昵称

于 2021-11-30 09:30:22 发布

阅读量880

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_57094383/article/details/121625052

版权

"该示例展示了Vue中父子组件之间的通信。父组件通过`<child @show="show"/>`监听子组件触发的'show'事件，而子组件通过`emit('show')`分发事件。父组件的`show`方法在事件触发时打印名字。"

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//父组件
<template>
  <child @show="show" />
</template>

<script lang='ts'> setup() {
    const show = () => {
      console.log('name:', 'hzw');
    };
    return {
      show,
    };
  }, </script>

//子组件
<template>
  <button>事件分发</button>
</template>
<script lang='ts'> import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Child',
  setup(props, { emit }) {
    const emitFn = () => {
      emit('show');
    };
    return {
      emitFn,
    };
  },
}); </script>