렌더 기능을 통한 v-model 구현이 사후 대응적이지 않음

렌더 기능을 통한 v-model 구현이 사후 대응적이지 않음

입력 영역 태그와 텍스트 영역 태그 간에 호환이 가능한 동적 입력 구성 요소를 생성하려고 한다.나는 렌더링 기능을 사용하여 이것을 구현하려고 한다.(https://vuejs.org/v2/guide/render-function.html#v-model).

내가 가지고 있는 문제는 v-model이 단 하나의 방법으로만 작동한다는 것이다. 내가 직접 데이터 속성을 변경하면 텍스트 영역 값이 업데이트되지만, 새로운 데이터를 텍스트 영역으로 변경하거나 입력하면 데이터 속성이 업데이트되지 않는다.양방향으로 작동시킬 수 있는 방법을 아는 사람?여기 코드 펜에 대한 내 코드 링크가 아래에 있는데, 그것은 문제를 보여준다.

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

할 필요가 있다$emit입력에서 변경된 사항.

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

문제는 v-model을 사용자 지정 구성 요소와 함께 사용한다는 점이다.구성 요소와 함께 사용할 경우v-model="message"단지 통사설 설탕일 뿐이다.

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

v-model을 사용자 지정 구성 요소와 함께 사용하려면 해당 구성 요소에value변경된 값과 함께 입력 이벤트를 프로펠러 및 방출한다.

문서에 추가 설명을 남기겠다.

참조URL: https://stackoverflow.com/questions/42676676/v-model-implementation-via-render-function-is-not-reactive