vue查漏补缺

组件基础

1. this.$listeners
   作用：包含父组件在当前组件的所有监听
   使用场景：在组件上监听原生事件

• 官网示列

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>
  `
})

现在 <base-input> 组件是一个完全透明的包裹器了，也就是说它可以完全像一个普通的 <input> 元素一样使用了：所有跟它相同的 attribute 和监听器都可以工作。

2. .sync
   • 本质上与组件中的v-mode一样，但是.sync更加灵活，且不显个数（一个组件只能有一个v-mode）
   • 使用场景：

     <example :title="title" @update:title="title = $event"></example>
     可简写为 
     <example :title.sync="title></example>