Vue.js 组件父事件

Question

im wondering why my code isn't working. I have an event 'leave' which should be called on blur. The components are displayed properly but when i leave the inputs the event wont be triggered.

 Vue.component('text-input', { props:['args'], template: '<input :id="args.id" :type="args.type"/>' }) App = new Vue({ el : '#app', data: { inputs : [ { id : 'nickname', type : 'text'}, { id : 'email' , type:'email'}, ] }, methods : { leave : function(event) { var id = $(event.target).attr('id'); console.log('left object ' + id); } } })

 <div id='app'> <div class="form-group"> <text-input class="form-control" v-for="input in inputs" v-bind:args="input" v-bind:key="input.id" v-model="input.id" v-on:blur="leave" /> </div> </div>

Thanks for your help :)

Answer 1

Your <text-input> component needs to forward (re- emit ) the blur event from the inner <input> element:

// text-input
template: `<input @blur="$emit('blur')">`

Then, <text-input> 's parent could receive it:

// parent of text-input
<text-input @blur="leave" />

 Vue.component('text-input', { props:['args'], template: `<input :id="args.id" :type="args.type" @blur="$emit('blur', $event)"/>` }) new Vue({ el: '#app', data() { return { inputs: [ {id: 1}, {id: 2}, ] } }, methods: { leave(e) { console.log('leave', e.target.id) } } })

 <script src="https://unpkg.com/vue@2.5.16"></script> <div id="app"> <div class="form-group"> <text-input class="form-control" v-for="input in inputs" v-bind:args="input" v-bind:key="input.id" v-model="input.id" v-on:blur="leave" /> </div> </div>