SOURCE

new Vue({
    el: "#app",
    data: {
        input: ''
    },
    components: {
        'YInput': {
            model: {
                prop: 'value',
                event: 'input'
            },
            inheritAttrs: false,
            props: {

			},
            computed : {
                listeners : function () {
                    const _this = this;
                    return Object.assign({} , 
                                         this.$listeners ,
                                         {
											input : function (e) {
                                                _this.$emit('input' , e.target.value);
                                            }
                                        })
                }
            },
            data: () => {
                return {

				}
            },
            template: '<div class="input">' + 
                '<div class="before">这是一个 input 组件</div>' + 
                '<input  v-on="listeners"' + 
            	'@input="$emit(\'input\' , $event.target.value)">' + 
            '</div>'
        }
    },
    methods: {
        focus() {
            console.log('focus!!!!!!');
        },
        click() {
            /* alert('clicked!!!!!') */
            ;
            console.log('click!!!!');
        }
    }
})

<div id="app">
    <y-input placeholder='请输入内容' @click='click' @focus='focus'
    title='这是一个input' v-model='input'>
    </y-input>
    {{ input }}
</div>

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

li {
    margin: 8px 0;
}

h2 {
    font-weight: bold;
    margin-bottom: 15px;
}

del {
    color: rgba(0, 0, 0, 0.3);
}