自定义组件中 v-model 的正确使用方法和常见问题解答

2024-03-15 14:51:12

在自定义组件中使用 Vue.js 的 v-model

简介

在 Vue.js 中，v-model 指令是一个强大的工具，可实现表单输入与数据模型之间的双向绑定。然而，当涉及到自定义组件时，使用 v-model 可能会有些棘手。本文将探讨如何正确使用 v-model，并解决在自定义组件上使用它时遇到的常见问题。

问题

使用 v-model 时遇到的常见问题是：

未定义 v-model 属性： 自定义组件必须定义一个与其数据模型绑定的 v-model 属性。
缺少数据事件方法： 自定义组件需要一个方法来向父组件传递输入值。

解决方案

1. 定义 v-model 属性

在自定义组件中定义 v-model 属性，指定要绑定的数据属性名称和触发数据更改事件的名称。

2. 添加数据事件方法

在自定义组件中，添加一个数据事件方法，在输入值更改时触发并向父组件传递更新后的值。

代码示例

以下是一个使用 v-model 与自定义组件配合的代码示例：

HTML:

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

JS:

Vue.component('products-list', {
    template:
        `<input class="product_name form-control" contenteditable="true"></input>`,
    model: {
        prop: 'productName',
        event: 'input'
    },
    methods: {
        input: function(event) {
            this.$emit('input', event.target.value);
        }
    }
});

var app = new Vue({
    el: '#app',
    data: {
        items: items,
        product: {
            name: "",
        }
    },
    methods: {
        productName: function(productName) {
            console.log(productName);
        }
    }
});