自定义组件

自定义事件

1. 推荐使用 kebab-case 的事件名

2. 使用v-model

   Vue.component('base-checkbox', {
   model: {
   prop: 'checked',
   event: 'change'
   },
   props: {
   checked: Boolean
   },
   template: `
   <input
     type="checkbox"
     v-bind:checked="checked"
     v-on:change="$emit('change', $event.target.checked)"
   >
   `
   })
   

   补充：
   
   

3. .sync 修饰符

   • 存在的意义：简写“双向绑定”

   • 例子：

     // 使用前
     <text-document
       v-bind:title="doc.title"
       v-on:update:title="doc.title = $event"
     ></text-document>
     
     // 使用后
     <text-document v-bind:title.sync="doc.title"></text-document>
     

   • 注意事项：

   

4. 绑定原始事件：native

   • 使用：

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

   • 创建：

     Vue.component('base-input', {
       inheritAttrs: false,
       props: ['label', 'value'],
       computed: {
         inputListeners: function () {
           var vm = this
           // `Object.assign` 将所有的对象合并为一个新对象
           return Object.assign({},
             // 我们从父级添加所有的监听器
             this.$listeners,
             // 然后我们添加自定义监听器，
             // 或覆写一些监听器的行为
             {
               // 这里确保组件配合 `v-model` 的工作
               input: function (event) {
                 vm.$emit('input', event.target.value)
               }
             }
           )
         }
       },
       template: `
         <label>
           {{ label }}
           <input
             v-bind="$attrs"
             v-bind:value="value"
             v-on="inputListeners"
           >
         </label>
       `
     })
     
     
     
     

---

5.生命周期

• 创建阶段（beforeCreate created beforeMount mounted）
• 更新阶段（beforeUpdate updated）
• 销毁阶段（beforeDestroy destroyed）