自定义事件

自定义事件

1. 事件名字

   • 组件上使用camelCase 名字的事件无法被kebab-case监听

     this.$emit('myEvent');
     <!-- 没有效果 -->
     <my-component v-on:my-event="doSomething"></my-componet>
     

   • 始终使用 kebab-case 的事件名

     this.$emit('my-event');
     <my-component v-on:my-event="doSomething"></my-componet>
     

2. 组件上使用v-model

   • 使用自定义事件和监听模拟

     <div id="app">
         <!-- 输入组件 -->
         <add-item @add-Item='add'></add-item>
         <ul>
             <li v-for="(item, index) in items" :key="index">{{item}}</li>
         </ul>
     </div>
     <script>
         Vue.component('add-item', {
             data(){
                 return {
                     message: '',
                 }
             },
             template:`
                 <div>
                     <input type="text" v-model='message' placeholder="请输入">
                     <button @click='add'>添加</button>
                 </div>
             `,
             methods:{
                 add(){
                     // 发送自定义事件通知父组件
                     this.$emit('add-item',this.message);
                     this.message = '';
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             data() {
                 return {
                     items:['HTML','JS','CSS']
                 }
             },
             methods: {
                 add(message){//接收到来自子组件的消息
                     this.items.push(message);
                 }
             }
         })
     </script>
     

   • 使用v-model形式

     <div id="app">
         <!-- 输入组件 -->
         <add-item v-model="message" @add-Item='add'></add-item>
         <ul>
             <li v-for="(item, index) in items" :key="index">{{item}}</li>
         </ul>
     </div>
     <script>
         Vue.component('add-item', {
             props:['message'],
             template:`
                 <div>
                     <input type="text" :value='message' @input='onInput' placeholder="请输入">
                     <button @click='add'>添加</button>
                 </div>
             `,
             methods:{
                 add(){
                     // 发送自定义事件通知父组件
                     this.$emit('add-item');
                 },
                 onInput(e){
                     this.$emit('input',e.target.value)
                 }
             }
         })
         const app = new Vue({
             el:'#app',
             model: {
                 //v-model默认转换是:value和@input
                 prop: 'value',
                 event: 'input'
             },
             data() {
                 return {
                     items:['HTML','JS','CSS'],
                     message:'',
                 }
             },
             methods: {
                 add(message){//接收到来自子组件的消息
                     this.items.push(this.message);
                     this.message = '';
                 }
             }
         })
     </script>
     

3. 组件绑定原生事件

   • 使用 v-on 的 .native 修饰符

     <base-input v-on:focus.native="onFocus"></base-input>
     

   • Vue 提供了一个 $listeners property，它是一个对象，里面包含了作用在这个组件上的所有监听器。有了这个 $listeners property，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素

4. sync修饰符

   • 以 update:myPropName 的模式触发事件

     this.$emit('update:title', newTitle)
     

     <text-document
       v-bind:title="doc.title"
       v-on:update:title="doc.title = $event"
     ></text-document>
     <!-- 为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符 -->
     <text-document v-bind:title.sync="doc.title"></text-document>
     

   • 有.sync修饰符的 v-bind 不能和表达式一起使用

     <text-document v-bind:title.sync="doc.title + ‘!’"></text-document>