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>