VueJS。 V模型中的自定义组件
问题描述:
HTML:VueJS。 V模型中的自定义组件
<products-list v-model="product.name" v-on:keyup="productName"></products-list>
JS:
Vue.component('products-list', {
template:
`<input class="product_name form-control" contenteditable="true"></input>`,
});
var app = new Vue({
el: '#app',
data: {
items: items,
product: {
name: "",
}
},
methods: {
productName: function() {
console.log(product.name);
}
}
});
当我开始在输入字段中键入我想在控制台这个数据,但目前它是空的。我究竟做错了什么?
答
v-model
默认使用@input
事件,因此如果您想在自定义组件上使用v-model
,则需要将输入事件发送给父级。所以,在你的组件,你只需要做:
<input class="product_name form-control" @input="$emit('input', $event.target.value)" />
现在,在你的父母,你可以这样做:
<products-list v-model="product.name"></products-list>
你可以看到这个的jsfiddle完整例子:https://jsfiddle.net/7s2ugt11/