VueJS。 V模型中的自定义组件

Question

HTML：

<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); 
     } 
    } 
}); 

当我开始在输入字段中键入我想在控制台这个数据，但目前它是空的。我究竟做错了什么？

Answer 1

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/