Vuejs에서 자식에서 부모로 이벤트 리스닝

Vuejs에서 자식에서 부모로 이벤트 리스닝

하위 구성 요소에서 상위 구성 요소로 이벤트를 보내 보기를 변경하려고 합니다.

이벤트를 생성하여 내보낼 수 있지만 템플릿이 등록되지 않은 것 같습니다.SFC를 사용하고 있습니다.또한 데이터 개체를 수동으로 업데이트하면 모두 정상적으로 작동합니다.

App.vue(부모)

<template>
    <div v-on:change-view="updateView">
        <!-- render the currently active component/page here -->
        <component v-bind:is="currentView"></component>
    </div>
</template>
<script>
export default {
  name : 'app',
  data () {
      return {
          currentView : 'Modal'
      }
  },
  methods : {
      updateView (view) {
          console.log('event listener!!!')
          this.currentView = view;
      }
  }
}
</script>

Modal.vue(자)

<template>
    <div> 
        <vk-modal v-bind:show="show">
            <h1>{{ title }}</h1>
            <p>{{ body }}</p>
            <p class="uk-text-right">
                <vk-button v-on:click="$emit('change-view', 'Purposes')">More Information</vk-button>
                <vk-button v-on:click="fullConsent" type="primary">I Agree</vk-button>
            </p>
        </vk-modal> 
    </div>
</template>
<script>
export default {
  name : 'modal',
  data () {
      return {
          show : true,
          title : 'Hello'
      }
  },
  methods : {
        fullConsent () {
            this.show = false;
        }
  }
}
</script>

도와주세요:)

이벤트 청취자를 에 등록해야 합니다.<component>컴포넌트 이벤트는 버블하지 않습니다(DOM 이벤트와는 다릅니다).

<div>
    <component v-bind:is="currentView" v-on:change-view="updateView"></component>
</div>

언급URL : https://stackoverflow.com/questions/50289974/event-listening-from-child-to-parent-in-vuejs