[Vue] 自定義事件

自定義事件命名

• 駝峰命名不會自動轉換成kebab-case，盡量使用kebab-case

e.g.

this.$emit('myCustomEvent');

// 這行不會有效果

<component v-on:my-custom-event="onEvent"></component>

• 但是會自動轉成小寫

上面那個宣告需要使用以下寫法才監聽的到

<component v-on:myCustomEvent="onEvent"></component>

原生事件綁定至自製組件(進階)

1. 使用自製組件，綁定原生事件的作法

• 父組件

<my-checkbox v-model="YesOrNo" v-on:focus.native="onFocus"></my-checkbox>

• 子組件

<input

        type="checkbox"

        v-bind:checked="checked"

        v-on:change="$emit('change',$event.target.checked)"

    >

以上可以監聽子組件根元素(input)的focus事件，並觸發父組件的onFocus

2. 當根元素不是input，卻又想要做到上面這件事情時

$listeners(進階)

• 父組件

<my-checkbox v-model="YesOrNo" v-on:click.native="onClick"></my-checkbox>

• 子組件

computed: {

        checkboxListener: function () {

            var vm = this;

            return Object.assign({},

                this.$listeners,

                {

                    click: function (event) {

                        vm.$emit('click', event.target.checked)

                    },

                    change: function (event) {

                        vm.$emit('change', event.target.checked)

                    },

                })

        }

    },

    template: `
    <label>
    {{label}}
        <input
            type="checkbox"
            v-bind="$attrs"
            v-bind:checked="checked"         
            v-on="checkboxListener"
        >
    </label>
    `
關鍵字預留 : .sync

source code