码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2021-05-24 05:33:32      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:contex   需要   template   hand   world   The   setup   button   定义   

子组件

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的迁移日记】

标签:contex   需要   template   hand   world   The   setup   button   定义   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!