Vue自定义事件

1. 事件的命名规范

组件上事件的命名推荐使用分隔符写法（** kebab-case **），如下面的add-size，因为html是大小写不敏感的，v-on后面跟的事件名都会转成小写的。用大写的会导致监听不到事件。

<div id='dynamic-component-demo' class='demo'>
    <base-checkbox v-on:add-size='doSomething'></base-checkbox>
</div>

<script>
    Vue.component('base-checkbox', {
        template: `
            <button v-on:click='$emit('add-size')'>按钮</button>
          `
    })
    new Vue({
        el: '#dynamic-component-demo',
        data: {
            lovingVue: true,
        },
        methods: {
            doSomething: function () {
                alert(1);
            }
        }
    });
</script>

2. 自定义组件的v-model

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

如下复选框：利用model定义了v-model把checked用作prop，把change作为event

<div id='dynamic-component-demo' class='demo'>
    <base-checkbox v-model='lovingVue'></base-checkbox>
</div>

<script>
    Vue.component('base-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
        <div>
            <input
              type='checkbox'
              v-bind:checked='checked'
              v-on:change='$emit('change', $event.target.checked)'
            >
            </div>
          `
    })
    new Vue({
        el: '#dynamic-component-demo',
        data: {
            lovingVue: true,
        }
    });
</script>

3. 将原生事件绑到组件

重点：.native修饰符的使用 和 $listeners的使用

• 用 .native修饰符

如下代码的第10行，如果用 v-on:focus.native='focus'，那么第20行的label包裹标签要去掉才有用，因为.native表示该事件直接作用于该组件的根元素上，根元素是input时，focus事件才发挥作用

• $listeners

为了避免上述根元素变掉，导致加载组件上原生事件不起作用的问题，vue引入了$listeners，如下，第10行的.native不需要了，在组件模板中input上加上 v-on='$listeners' ，表示加在组件上的原生事件都应用在模板中input元素上。

问题解决，完美！ 完整demo如下：

<div id='dynamic-component-demo' class='demo'>
    <base-input
            data-date-picker='activated'
            v-bind:label='pleae'
            label2='dd'
            v-bind:value='aa'
            v-model='username'
            required
            placeholder='Enter your username'
            v-on:focus='onFocus'   // v-on:focus.native='focus' 
    ></base-input>
</div>

<script>

    Vue.component('base-input', {
        inheritAttrs: false,
        props: ['label', 'value'],
        template: `
        <label>
              {{ label }}
              <input
                v-bind='$attrs'
                v-bind:value='value'
                v-on:input='$emit('input', $event.target.value)'
                v-on='$listeners'   
              >
        </label>
          `
    })
    new Vue({
        el: '#dynamic-component-demo',
        data: {
            aa:1,
            username:'cc',
            pleae:'pleae'
        },
        methods:{
            onFocus:function () {
                console.log('focus')
            }
        }

    });

4. .sync修饰符

子组件改变父组件属性的值，实现双向数据绑定
如下代码中使用 sync修饰符，使代码由三行变成一行，更简洁。

<div id='dynamic-component-demo'>
  <!--  <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>
</div>

<script>
    Vue.component('text-document', {
        props: ['title'],
        template: `
            <div>
                <h1>{{title}}</h1>
                <button v-on:click='changeTitle'>change title</button>
            </div>
          `
        ,
        methods: {
            changeTitle: function () {
                // 改变了父组件中title属性的值，实现了双向数据绑定
                this.$emit('update:title', 'new Title');
            }
        }
    })

    new Vue({
        el: '#dynamic-component-demo',
        data: {
            doc: {
                title: 'hello vue'
            }
        }
    });
</script>

完整demo：链接

（完）