javascript - Vuejs 中渲染函数的两种方式绑定(bind)

Question

我正在 Vuejs 中构建一个应用程序，在其中为 input 字段创建渲染函数。我正在发出一个输入事件来与v-model绑定(bind)。当我分配/插入任何值时，我可以看到值正在被分配，但是当我以另一种方式分配时，即为输入字段的 v-model 分配任何值时，它显示为空，或者显示占位符值(如果可用)

这是我的代码:

createElement('input', {
    class: 'form-control m-input',
    attrs: { type: this.type, placeholder: this.placeholder },
    on: {
        input: (event) => {
            this.$emit('input', event.target.value)
        }
    }
})

在 Prop 中我有:

props: {
    label: String,
    type: String,
    placeholder: String,
},

在声明组件时我会这样做:

<nits-input
        label="Email"
        type="email"
        placeholder="Enter your email"
        v-model="email"
>
</nits-input>

在数据中，我尝试分配值:

data() {
    return {
        email: 'test@example.com',
    }
},

如何实现为 v-model 赋值并将其显示在相应字段中。帮我解决这个问题。谢谢。

Answer 1

v-model 实际上只是拥有 value 属性并发出输入事件的简写。

因此，除了现有的 props 之外，您还需要添加一个值 1:

props: {
    label: String,
    type: String,
    placeholder: String,
    value: String
},