Vue.js组件间通信方式总结【推荐】

// 父组件 ParentComponent
<template>
 <div class=\"parent-component\">
 <h2>这是一个父组件</h2>
 <ChildComponent :parentMessage=\"parentMessage\"/>
 </div>
</template>
< >
 import ChildComponent from \'./ChildComponent\'
 export default {
 name: \"ParentComponent\",
 data(){
  return{
  parentMessage:\'这是来自父组件的数据\'
  }
 },
 components:{
  ChildComponent
 }
 }
</ >
// 子组件 ChildComponent
<template>
<div class=\"child-component\">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
</div>
</template>
< >
 export default {
 name: \"ChildComponent\",
 props:[\"parentMessage\"]
 }
</ >

// ParentComponent 父组件
<template>
 <div class=\"parent-component\">
 <h2>这是一个父组件total:{{total}}</h2>
 <ChildComponent :parentMessage=\"parentMessage\" :total=\"total\" @handleAdd10=\"getTotal\"/>
 </div>
</template>
< >
 import ChildComponent from \'./ChildComponent\'
 export default {
 name: \"ParentComponent\",
 data(){
  return{
  parentMessage:\'这是来自父组件的数据\',
  total:10,
  }
 },
 components:{
  ChildComponent
 },
 methods:{
  getTotal(total){
  this.total=total;
  console.log(\'ParentComponent total:\',total);
  }
 }
 }
</ >
// ChildComponent 子组件
<template>
<div class=\"child-component\">
 <h2>这是一个子组件</h2>
 <h3>{{parentMessage}}</h3>
 <button @click=\"handleAdd10\">+10按钮</button>
</div>
</template>
< >
 export default {
 name: \"ChildComponent\",
 props:[\"parentMessage\",\"total\"],
 methods:{
  handleAdd10(){
  let total=this.total+10;
  console.log(\'ChildComponent $emit:\');
  this.$emit(\'handleAdd10\',total);
  }
 }
 }
</ >

// ParentComponent 改动如下
**
<h2>这是一个父组件total:{{total}}</h2>
<ChildComponent :parentMessage=\"parentMessage\" :total=\"total\" @handleAdd10=\"getTotal\"/>
<InputComponent v-model=\"total\"/>
**
< >
import InputComponent from \'./InputComponent\'
</ >
**
// InputComponent 子组件
<template>
 <input type=\"text\" @input=\"updateValue($event)\">
</template>
< >
 export default {
 name: \"InputComponent\",
 methods:{
  updateValue(evt){
  this.$emit(\'input\',evt.target.value)
  }
 }
 }
</ >

// ParentComponent 父组件
<template>
 <div class=\"parent-component\">
 {{message}}
 <br>
 <br>
 <component-a/>
 </div>
</template>

< >
 import Vue from \'vue\'
 let bus=new Vue();
 export default {
 name: \"ParentComponent\",
 data(){
  return{
  message:\'\',
  }
 },
 components:{
  componentA:{
  template:\'<button @click=\"handleClick\">传递事件</button>\',
  methods:{
   handleClick(){
   bus.$emit(\'on-message\',\'来自子组件component-a的内容\')
   }
  }
  }
 },
 mounted(){
  bus.$on(\'on-message\',(msg)=>{
  this.message=msg;
  });
 }
 }
</ >