Vue.js组件父事件 [英] Vue.js component parent event
本文介绍了Vue.js组件父事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想知道为什么我的代码无法正常工作.我有一个事件离开",应该在模糊时调用.组件显示正确,但是当我离开输入时,将不会触发该事件.
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>
感谢您的帮助:)
推荐答案
Your <text-input>
component needs to forward (re-emit) the blur
event from the inner <input>
element:
// text-input
template: `<input @blur="$emit('blur')">`
然后,< text-input>
的父母可以接收它:
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>
这篇关于Vue.js组件父事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文