14-自定义事件 & .native原生事件绑定到组件 & .sync修饰符

事件名: 事件名不存在自动大小写转换,触发事件名需要完全匹配监听事件的名称

this.$emit('myEvent')

/* 监听名字的 kebab-case 版本不会任何效果 */
<my-component v-on:my-event="doSomething"></my-component>

自定义组件的 v-model:
默认利用 value 的 prop 和 input 的事件,像单选框、复选框类型会将 value 用于不同目的,model 选项可以避免冲突

Vue.component('base-checkbox', {
  model: { prop: 'checked', event: 'change' }, /* model 选项 */
  props: { checked: Boolean }, /* checked 这个 prop 需要声明 */
  template: `
      <input type="checkbox" 
      	:checked="checked" 
      	@change="$emit('change', $event.target.checked)"
      >`
})
/*
  lovingVue 值会传入 checked 的 prop,且当 <base-checkbox> 触发 change 事件并附带新值时,
  lovingVue 属性会更新但仍要在组件的 props 选项里声明 checked 这个 prop
*/
<base-checkbox v-model="lovingVue"></base-checkbox>

将原生事件绑定到组件: 使用 v-on 的 .native 修饰符

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

尝试监听一个类似 的非常特定的元素时, 监听的可能是个<label’> 元素时父级的 .native 监听器将静默失败,可以利用 $listeners 属性(一个对象,包含组件所有监听器)

  /* .native 监听器将静默失败 */
  <label>{{ label }}<input /></label>

解决 .native 监听器将静默失败的问题

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

.sync 修饰符: 对一个 prop 进行"双向绑定",带有 .sync 修饰符的 v-bind 不能和表达式一起使用

    /* 子组件中以 $emit( update:myPropName, arg ) 触发事件 */
    this.$emit('update:title', newTitle)

    /* 父组件中以 v-bind.sync 接收 */
    <text-document v-bind:title.sync="doc.title"></text-document>

当对象同时设置多个prop 的时候,可以将 .sync 和 v-bind 配合使用,把对象中的属性都作为独立的prop传递

  <text-document v-bind.sync="doc"></text-document>  // doc:{}