在自定义组件上监听原生的focus事件

var demo23 = new Vue({
    el: "#demo23",
    data: {
        labels: [
            { id: 1, name: '姓名：', inputvalue: '' },
            { id: 2, name: '年龄：', inputvalue: '' },
            { id: 3, name: '性别：', inputvalue: '' },
            { id: 4, name: '住址：', inputvalue: '' },
            { id: 5, name: '职业：', inputvalue: '' }
        ],
        inputvalue: ''
    },
    methods: {
        onFocus: function() {
            alert('fuck')
        },
        alertaaa: function() {
            alert('aaa')
        }
    },
    components: {
        'label-input': {
            inheritAttrs: false,
            props: ['value', 'label'],
            computed: {
                inputListeners: function() {
                    var vm = this
                        // Object.assign将所有对象合并为一个新对象
                    var obj = Object.assign({},
                        //从父级添加所有的监听器
                        this.$listeners,
                        //然后可以添加一些自定义监听器，
                        //或者覆写一写监听器行为
                        {
                            //这里确保组件配合v-model的工作
                            input: function(event) {
                                vm.$emit('input', event.target.value)
                            }
                        }
                    )
                    return obj
                }
            },
            template: `
            <label style="display:block">
                {{ label }}
                <input v-bind="$attrs" :value="value" @input="$emit('input', $event.target.value)"></input>
            </label>
            `
        }
    }
})

    <div id="demo23">
        <!-- 如果直接在自定义组件上监听原生的focus事件，那么onFocus不会如期被调用 -->
        <!-- 当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素，就不需要 -->
        <div v-for="label in labels">
            <label-input v-model="label.inputvalue" @click.native="alertaaa" :label="label.name" :key="label.id"></label-input>
            <p>{{ label.inputvalue }}</p>
        </div>
    </div>