首页 > 其他 > 详细

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

时间:2021-05-11 17:08:15      阅读:10      评论:0      收藏:0      [点我收藏+]

子组件

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>

父组件还是一样

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

原文:https://www.cnblogs.com/mica/p/14755513.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!