javascript - Vue.js 组件父事件
问题描述
我想知道为什么我的代码不起作用。我有一个事件“离开”,应该在模糊时调用。组件显示正确,但是当我离开输入时,不会触发事件。
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>
谢谢你的帮助 :)
解决方案
您的<text-input>
组件需要从内部元素转发(重新发出)事件:blur
<input>
// text-input
template: `<input @blur="$emit('blur')">`
然后,<text-input>
的父母可以收到它:
// 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>
推荐阅读
- google-chrome - WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED! Chrome Secure Shell App extension
- javascript - 使用nodejs将表单十六进制缓冲区转换为int
- .net - ExecuteScalar 函数失败。必须声明标量变量“@DeviceId”
- google-chrome - ASP MVC 未在 .ASPXAUTH cookie 中设置 SameSite 属性
- regex - 如何使用 Postgres 正则表达式替换捕获组
- api - 使用 OAuth 访问 3dCart api
- spring-boot - Spring boot @project.version@ 变量不适用于 openApi
- azure-functions - 队列触发的 Azure 函数成功完成,但最后抛出错误
- javascript - 光标未返回其默认状态
- java - Flutter 项目无法与 firebase 同步