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

Question

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

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

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

问题是您将 v-model 与自定义组件一起使用。与组件一起使用时 v-model="message" 只是

的语法糖

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

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

我会在 documentation

上留下进一步的解释

Answer 2

您需要 $emit 根据您的输入进行更改。

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

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

v-model implementation via render function is not reactive

javascript

vue.js

vue-component

vuejs2