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

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

我遇到的问题是 v-model 只单向工作，如果我直接更改数据属性，它会更新 textarea 的值，但如果我在 textarea 中更改或输入新数据，它不会更新数据属性。有人知道如何让它双向工作吗？下面是我的代码链接，在 CodePen 上展示了这个问题：

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

答案＃1

你需要从你的输入中$emit变化。

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

答案＃2

问题是你在自定义组件中使用了 v-model。在组件中使用时，v-model="message" 只是语法糖的简写

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

所以要在自定义组件中使用 v-model，你的组件必须有 value 属性，并在值改变时触发 input 事件。

我将把进一步的解释留给文档