vue3 events 事件

事件是组件开发中必不可少的部分，事件就是当你完成了某个任务后，你把这个事情告诉别人的动作叫作事件，比如你想通知父组件我已经执行了保存数据，那么就可以通过事件完成，本文将介绍任何在vue3中定义事件以及调用者如何接收这个事件。

Setup 定义事件

<template>
    <div class="itxst">
      <!--子组件eventsSetup.vue 定义事件演示--> 
      <input type="text" v-model="msg"  />
      <input type="button" value="点击试试" @click="onDone"/>
    </div>
  </template>
  <script setup lang="ts"> 
  import { ref } from "vue";
  const msg=ref('www.itxst.com');
 
   //定义一个点击完成事件 done 和 sent 两个事件
    const emits = defineEmits(["done","sent"]);

    //TS模式 定义emits
    /*
    const emits = defineEmits<{
     (event: "done", msg: String): void;
     (event: "sent"): void;
    }>();
    */

  const onDone=()=>{
    //触发done事件，请把用户输入的值msg传出去
    emits("done", msg.value);
    //也可以不传参数
    //emits("sent");
  }
</script>
<style scoped>.itxst{
    display: inline-block;
    padding: 6px;
}</style>

父组件app.vue接收子组件eventsSetup.vue的done事件

<template>
    <div>{{text}}</div>
    <!--接收组件里面的done事件-->
    <demo @done="onDone"/>
  </template>
  <script setup> 
  import { ref } from "vue";
  import demo from './eventsSetup.vue'
  const text=ref('');
 
  //接收组件里面的done事件
  const onDone=(msg)=>{
    text.value='你输入了：'+msg;
  }
 </script>
<style scoped> </style>

在线试一试

选项式定义事件

<template>
  <div class="itxst">
    <!--子组件 eventsNotSetup.vue 定义事件演示-->
    <input type="text" v-model="msg" />
    <input type="button" value="点击试试" @click="onDone" />
  </div>
</template>
  <script>
    export default {
      name: "demo",
     data(){
      return  {
        msg:'输入文字试试'
      }
     },
      methods: {
        onDone: function () {
          //非setup语法糖 可以直接触发事件,不需要定义
          this.$emit("done",this.msg);
      },
    }}
    </script> <style scoped>
.itxst {
  display: inline-block;
  padding: 6px;
}
</style>

父组件app.vue接收子组件eventsNotSetup.vue的done事件

<template>
  <div>{{ text }}</div>
  <!--接收组件里面的done事件-->
  <demo @done="onDone" />
</template>
<script>
import demo from "./eventsNotSetup.vue";
export default {
  name: "app",
  //注册组件
  components: {
    demo,
  },
  data() {
    return {
      text: "",
    };
  },
  methods: {
    onDone: function (msg) {
      this.text = "你输入了：" + msg;
    },
  },
};
</script>  
<style scoped>
</style>

在线试一试