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

Question

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

我遇到的问题是v-model只能以一种方式工作,如果我直接更改数据属性,它会更新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)
    }
}