SOURCE

console 命令行工具 X clear

                    
>
console
Vue.component('parent-component',{
  template: `
		<div>
			{{ title }}
			<br/>
			<child-component @updateParent="update" :updateCallback="updateCallback">
      </child-component>
		</div>
	`,
  data(){
    return {
      title: "父组件"
    }
  },
  methods: {
    update(){
      this.title = "父组件更新了($emit)";
    },
    updateCallback(){
      this.title = "父组件更新了(prop callback)";
    },
  }
});
Vue.component('child-component',{
  template: `
		<div>
      <button @click="updateByEmit">
         通过 $emit 更新父组件
      </button>
			<br/>
      <button @click="updateByCallback">
         通过 prop callback 更新父组件
      </button>
		</div>
	`,
  props: {
    updateCallback: Function,
  },
  methods: {
    updateByEmit(){
      this.$emit("updateParent");
    },
    updateByCallback(){
      this.updateCallback();
    },
  }
});

new Vue({
  el: '#root',
})
<script src="https://unpkg.com/vue"></script>

<div id="root">
  <parent-component>
  </parent-component>
</div>