Vuejs 中从子级到父级的事件监听

Question

我想从子组件向其父组件发送一个事件，这应该会改变视图。

我能够创建事件并发出它，但是我的模板似乎没有注册它，我使用的是单文件组件 (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>

请帮忙:)

Answer 1

你需要在<component>本身上注册事件监听器；组件事件不会冒泡 (unlike DOM events)。

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