通过渲染函数实现 v-model 不是反应式的

Question

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

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

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 属性并使用更改后的值发出输入事件。

我会留下更多的解释给documentation