Vue3 中组件传值emit【Vue2.x向Vue3.x的迁移日记】

子组件

child.vue

<template>
  <div>
    <p>hello world</p>
    <button @click="handleClick">click</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  emits: ["click"],
  setup(prop, context) {
    const handleClick = () => {
      context.emit("click");
    };
    return {
      handleClick
    };
  }
});
</script>

子组件中使用context.emit传递出去。

值得注意的是：emits

emits: ["click"]

将自定义的名称需要再emits中声明

 

父组件

father.vue

<template>
  <el-button type="primary" @click="setClick"></el-button>
</template>

<script lang="ts">
export default {
  setup() {
    const setClick = () => {
      console.log("click");
    };
    return { setClick };
  }
};
</script>

父组件还是一样