触发组件选项(自定义事件)

• 事件名
  • 事件名提供了自动的大小写转换，在子组件中使用驼峰命名的方法触发一个事件，父组件中通过-的形式 书写触发对应的方法名

  this.$emit('myEvent');

  <parent-com @my-event="myEvent" ></parent-com>

• 定义自定义事件
  • 可以通过 emits 选项在组件上定义已发出的事件。
  • 当在 emits 选项中定义了原生事件 (如 click) 时，将使用组件中的事件替代原生事件侦听器。自定义事件与原生事件重名，定义在emits中的事件会覆盖原生事件。没有在emits 中的与原生事件重名的事件，当触发这个事件的时候，会导致两个事件都被触发

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

• 验证抛出的事件
  • 要添加验证，将为事件分配一个函数，该函数接收传递给 $emit 调用的参数，并返回一个布尔值以指示事件是否有效

    emits: {
      changeText: text => {
        if (typeof text === "string") {
          return true;
        } else {
          throw new Error("This parameter must be of type string!"); 
      }
    }
  },
  methods:{
    submitForm(){
       this.$emit('changeText', '暴雨')
    }
  }

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

   <my-component v-model:title="bookTitle"></my-component>
  

   app.component('my-component', {
   props: {
     title: String
   },
   emits: ['update:title'],
   template: `
     <input
       type="text"
       :value="title"
       @input="$emit('update:title', $event.target.value)">
   `
   })
  

• 多个 v-model 绑定
  • 每个v-model 将同步到不同的 prop，而不需要在组件中添加额外的选项
• 处理 v-model 修饰符
  • 添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。

  <!-- parant.vue -->
  <template>
    <child-com v-model.isShow='text'></child-com>
  </template>
  <script>
    export default{
      data(){
        return {
          text:'哈哈'
        }
      }
    }
  </script>
  <!-- child.vue -->
  <template>
    <p>{{modelValue}}</p>
    <button @click='update'> 更新</button>
  </template>
  <script>
    export default{
      data(){
        return {
          text:'哈哈'
        }
      },
      props:{
        modelValue:String,
        modelModifiers: {
          default: () => ({})
        }
      },
      methods:{
        update(){
          this.$emit('update:modelValue','zmsm');
        }
      }
    }
  </script>

• 对于带参数的 v-model 绑定，生成的 prop 名称将为 arg + "Modifiers"

    <!-- parant.vue -->
  <template>
    <child-com v-model:userName.isShow='name'></child-com>
  </template>
  <script>
    export default{
      data(){
        return {
          name:'qqsb'
        }
      }
    }
  </script>
  <!-- child.vue -->
  <template>
    <p>{{userName}}</p>
    <button @click='update'> 更新</button>
  </template>
  <script>
    export default{
      data(){
        return {
          text:'哈哈'
        }
      },
      props:{
        userName:String,
        userNameModifiers: {
          default: () => ({})
        }
      },
      methods:{
        update(){
          console.log(this.userNameModifiers); // { isShow:true }
          this.$emit('update:userName','qqfw');
        }
      }
    }
  </script>