수동으로 인스턴스화된 컴포넌트를 사용한 이벤트 처리

수동으로 인스턴스화된 컴포넌트를 사용한 이벤트 처리

Vuejs 구성 요소를 수동으로 인스턴스화하려고 하지만 상위 구성 요소에 이벤트를 전달할 수 없습니다.

<template>
  <div>
    <input :value='value' @input='updateValue($event.target.value)'>
  </div>
</template>
<script>
  export default {
    props: ['value'],
    methods: {
      updateValue: function (value) {
        this.$emit('input', value);
      }
    }
  }
</script>

컴포넌트는 다음과 같이 초기화됩니다.

var ComponentClass = Vue.extend(Component);
var instance = new ComponentClass({
  propsData: {
    value: this.modelValue
  }
});
instance.$mount();
document.getElementById('app').appendChild(instance.$el)

문제는 말이다this.modelValue는 자동으로 갱신되지 않습니다.this._events(컴포넌트 내)에는 리스너가 포함되어 있지 않습니다.단, 템플릿에 컴포넌트를 추가하면 예상대로 동작합니다(this.modelValue갱신됩니다).컴포넌트를 수동으로 인스턴스화할 때 수행해야 할 다른 작업이 있습니까?

이 노래에 귀를 기울일 필요가 있습니다.input이벤트. 그게 바로v-model한다.

다음 코드를 사용해 보십시오.

var ComponentClass = Vue.extend(Component);
var instance = new ComponentClass({
  propsData: {
    value: this.modelValue
  }
});
instance.$mount();
instance.$on('input', (e) => this.modelValue = e);    // <============ added this line
document.getElementById('app').appendChild(instance.$el)

언급URL : https://stackoverflow.com/questions/49352856/event-handling-with-manually-instantiated-component