Vue 2.0 $on()으로 마이그레이션해도 $emit()이 들리지 않습니다.

Vue 2.0 $on()으로 마이그레이션해도 $emit()이 들리지 않습니다.

배경:1.0에서 2.0으로 이행합니다.

현재 네스트된 컴포넌트를 사용하고 있습니다.부모와 자녀의 관계는 아주 좋다.그러나 부모 컴포넌트와 메인 Vue() 인스턴스 간의 관계는 끊어졌습니다.계산 속성에서cssstyleVue() 인스턴스 내에서는 예상대로 $emit()/$on()에 따라 업데이트되지 않습니다.

관련 섹션:

HTML에서 상위 구성 요소 사용:

<f9-padding v-if="editable" ></f9-padding>

부모 컴포넌트 내부

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        bus.$emit('padding_changed', padding_style);
        return padding_style;
    }
}

메인 Vue() 인스턴스 내부

computed: {
    cssstyle: function() {
        console.log('cssstyle computed');
        bus.$on('padding_changed', function (padding_style) {
            return padding_style;
        });
        return 'padding: 0px;';
    },
    ...

부모 내부의 계산된 속성이 올바르게 업데이트됩니다.그러나 메인 Vue() 인스턴스 내의 계산된 속성은 페이지 로드 시에만 실행됩니다.사용하지 않는 부모로부터 데이터를 내보내는 방법을 이해할 수 없습니다.<input>요소.이 사이트에서 찾은 대부분의 예시는 오직 다음 사항에 초점을 맞추고 있습니다.<input>사건입니다. 방금 재산 데이터가 바뀌었어요여기서의 show 메서드(http://rc.vuejs.org/guide/components.html#Custom-Events,)를 사용하려고 했습니다만, 이 문서에서 우려되는 것은 부모 컴포넌트와 메인 Vue() 인스턴스가 아닌 컴포넌트 간의 이벤트 리슨에 대해 설명하고 있다는 것입니다.

업데이트: 부모의 계산된 속성을 다음과 같이 변경하여 이 문제를 해결할 수 있었습니다.

computed: {
    cssstyle: function() {
        var padding_style = this.padding();
        this.$root.cssstyle = padding_style;
        return padding_style;
    }
}

cssstyle을 계산에서 루트 Vue() 인스턴스의 데이터로 이동합니다.

data: {
    cssstyle: 'padding: 0px;',
},

다만, 다음과 같은 것을 사용하는 것은 조금 더러움을 느낍니다.

this.$root.cssstyle

다른 방법은 없습니까?

이벤트 송신 및 수신에 대해서는, 2.0 메뉴얼로 이것을 확인해 주세요.

방출하는 경우this에서custom-component:

cssstyle: function () {
  /*...*/
  this.$emit('onsomething', params)
}

그런 다음 이 컴포넌트의 인스턴스를 만들 때마다 다음과 같은 작업을 수행합니다.

<tamplate>
    <custom-component @onsomething="action"></custom-component>
</tamplate>

다음으로 JS에서 다음을 수행합니다.

methods: {
  action: function (params) {
    console.log('On something')
  }
}

언급URL : https://stackoverflow.com/questions/39319641/migrating-to-vue-2-0-on-is-not-hearing-emit