Question

我正在尝试创建可在input和textarea标签之间互换的动态输入组件。我试图通过使用渲染功能来实现这一点。（https://vuejs.org/v2/guide/render-function.html#v-model）。

我遇到的问题是v-model只能以一种方式工作，如果我直接更改数据属性，它会更新textarea值，但如果我将新数据更改或输入textarea，则不会更新数据属性。有谁知道如何让它双向工作？这是我的代码笔的代码链接，它说明了问题：

const tag = Vue.component('dynamic-tag', {
    name: 'dynamic-tag',
    render(createElement) {
        return createElement(
            this.tag,
            {
                domProps: {
                    value: this.value
                },
                on: {
                    input: event => {
                        this.value = event.target.value
                    }
                }
            },
            this.$slots.default
        )
    },
    props: {
        tag: {
            type: String,
            required: true
        }
    }
})

const app = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  components: {tag}
})

http://codepen.io/asolopovas/pen/OpWVxa?editors=1011

Answer 1

您需要对输入进行$emit更改。

on: {
    input: event => {
        this.value = event.target.value
        this.$emit('input', event.target.value)
    }
}

Answer 2

问题是您正在使用带有自定义组件的v-model。与组件v-model="message"一起使用时只是

的语法糖

v-bind:value="message"
v-on:input="value => { message = value }"

因此，要将v-model与自定义组件一起使用，组件必须具有value prop并使用更改后的值发出输入事件。

我将进一步解释documentation

通过渲染函数实现的V模型不是被动的

2 个答案: