Vue.js 이벤트를 컴포넌트 체인으로 전파하는 방법

Vue.js 이벤트를 컴포넌트 체인으로 전파하는 방법

3개의 컴포넌트가 있습니다.

난 그런 거에 아무런 영향도 없어Datatable컴포넌트는 npm부터 입수할 수 있기 때문입니다.

이제 이벤트를 보내려고 합니다.EditButton나의 것Zonelist.

Zonelist컴포넌트:

<template>
<datatable :columns="table_columns" :data="table_rows" filterable paginate v-on:remove="removeItem"></datatable>
</template>
<script>
import datatable from 'vuejs-datatable';
import moment from 'moment';
export default {
    data() {
        return {
            table_columns: [
                {label: "Zone", component: 'ZoneLink'},
                {label: "Last updated", callback (row) {
                    let locale = $('html').closest('[lang]').attr('lang') || 'en';
                    moment.locale(locale);
                    return moment(row.last_updated).format('D. MMM YYYY');
                }},
                {label: '', component: 'EditButton'}
            ],
            table_rows: [
                {
                    "name": "xyz.de",
                    "last_updated": "2017-10-21 17:29:50"
                }
            ],
            form: {
                name: '',
                errors: []
            }
        };
    },
    components: {
        datatable
    },
    methods: {
            removeItem (item) {
                this.table_rows.forEach((value, index, array) => {
                    if (value.name === item) {
                        Vue.delete(array, index);
                    }
                });
            }
      }
}
</script>

이제 나의EditButton요소$emit()의remove이벤트(파라미터 포함)를 지정합니다.

하지만 아무 일도 일어나지 않는다.그래서 Vue가 듣는 사람을 찾지 못하는 것 같아요.

(여기서는 ES6의 메서드 속기를 사용하고 있습니다)

어떻게 하면 변이 없이 제대로 할 수 있을까요?Zonelist~에 의한this.$parent.$parent에서EditButton?

Vue의 비부모-자녀 통신은 일반적으로 이벤트 버스 또는 상태 관리 시스템을 통해 처리됩니다.

이 경우 응용 프로그램이 더 복잡하지 않는 한 이벤트 버스만 있으면 됩니다.단일 파일 컴포넌트를 사용하고 있기 때문에 메인스크립트 등 윈도 상에서 버스를 선언해야 할 수 있습니다.

window.bus = new Vue()

그럼 네 안에EditButton, 이벤트를 내보낼 수 있습니다.

bus.$emit('some-event', someData)

그리고 당신의 안에ZoneList들을 수 있어요.

bus.$on('some-event', someData => this.doSomething(someData))

또 다른 선택사항은DataTable(모든 이벤트를) 더해서 넘기다v:on="$listeners"그 탓이다.

상세한 것에 대하여는, https://stackoverflow.com/a/61329264/578318 를 참조해 주세요.

편집:

더 안전한 방법은 부모 수업에서 이벤트를 듣고 전달하는 것입니다.

    <ancestor @message="console.log($event)"> <!-- cute trick see * -->
    ...
    <parent @message="$emit('message', $event)"> <!-- passes it on -->
    ...
    <child @click="$emit('Hello World')"> <!-- creates the event -->

*computed: {'console' : () => console}

기본적으로 Vue 구성 요소에 노드가 하나만 있는 경우(즉, 하위 노드 없음) 부모에서 Vue 구성 요소에 연결하는 모든 이벤트는 일반 HTML 요소와 동일하게 실행됩니다.그러나 자녀가 있는 하위 노드가 있으면 어떻게 됩니까?이 경우 다음 명령을 사용합니다.v-on="$listeners"

예:

<template>
  <div v-on="$listeners">
    <button>Hello world</button>
  </div>
</template>

문서: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

언급URL : https://stackoverflow.com/questions/43559561/how-to-propagate-a-vue-js-event-up-the-components-chain