自定义事件

• 一、定义自定义事件
• 二、验证抛出的事件
• 三、v-model 参数
• 四、多个 v-model 绑定

一、定义自定义事件

• 可以通过 emits 选项在组件上定义已发出的事件。

app.component('custom-form', {
 emits: ['in-focus', 'submit']
})

• 当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。

二、验证抛出的事件

• 与 prop 类型验证类似，如果使用对象语法而不是数组语法定义发出的事件，则可以验证它。
• 要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效。

app.component('custom-form', {
 emits: {
   // 没有验证
   click: null,

   // 验证submit 事件
   submit: ({ email, password }) => {
     if (email && password) {
       return true
     } else {
       console.warn('Invalid submit event payload!')
       return false
     }
   }
 },
 methods: {
   submitForm() {
     this.$emit('submit', { email, password })
   }
 }
})

三、v-model 参数

• 默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称。

<input type="text" :value="val" @input="$emit('update:val',$event.target.value)" >
</div>
//子组件将需要一个 val prop 并发出 update:val 要同步的事件：
export default{
   name:"comA",
   props:{
       title:String,
       val:String
   },
   updated() {
       console.log(this.val);
       this.$emit("myevent",this.val);
   },

四、多个 v-model 绑定

• 通过利用以特定 prop 和事件为目标的能力，正如我们之前在 v-model 参数中所学的那样，我们现在可以在单个组件实例上创建多个 v-model 绑定。
• 每个 v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项

Home.vue
<div id="Home">
   Home
   <!-- 给子组件添加自定义事件 -->
   <v-A title="A子组件" v-model:val="info" data-index="2" @myevent="myEvent"></v-A>
   {{msg}}
</div>

export default{
   name:"Home",
   data() {
       return {
           m:"default",
           info:"请输入"
       }
   },
   methods: {
       myEvent(args){
           console.log("触发自定义事件",args);
           this.msg=args;
           this.info=args;
       }
   },
   computed:{
       msg:{
           get(){
               return this.m;
           },
           set(vm){
               this.m=vm;
           }
       }
   }
}

comA.vue
<div id="comA">
   {{title}}
   <br>
   <button @click="sendMsg">通过自定义事件给父组件传递参数</button>
   <input type="text" :value="val" @input="$emit('update:val',$event.target.value)" >
</div>

export default{
   name:"comA",
   props:{
       title:String,
       val:String
   },
   //接入emits  触发自定义事件  才会开始验证
   emits: {
       myevent(args) {
           console.log(args);
           //对数据可以进行代码验证
       },
   },
   mounted() {
       //this.$attrs 获取当前组件除props以外的非props传值或者自定义事件,是只读的
       console.log(this.$attrs);
       // //触发自定义事件的
       // this.$emit("myevent");
   },
   updated() {
       console.log(this.val);
       this.$emit("myevent",this.val);
   },
   methods: {
       sendMsg(){
           this.$emit("myevent","我给你传值了");
       }
   },
}