在自定义组件上使用 v-model

Question

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

HTML:

 <products-list v-model="product.name" v-on:keyup="productName"></products-list>

记者：

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

原文由 Svetoslav Dimitrov 发布，翻译遵循 CC BY-SA 4.0 许可协议

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/

原文由 craig_h 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Vue 3.x 有重大变化：

BREAKING ：当用于自定义组件时， v-model 道具和事件默认名称已更改：

道具： value -> modelValue

事件： input -> update:modelValue

https://v3-migration.vuejs.org/breaking-changes/v-model.html

所以你的 子组件 将是：

 <template>
  <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

<script>
export default {
  name: "ProductsList",
  props: ['modelValue']
}
</script>

在 父组件 中你不会改变任何东西：

 <products-list v-model="product.name"></products-list>

原文由 Leon Vogler 发布，翻译遵循 CC BY-SA 4.0 许可协议