我说这是全网最全vue组件通信方式

　　父子组件通信
　　prop
　　event
　　style和class
　　natvie修饰符
　　$listeners
　　v-model
　　sync修饰符
　　$parent  和$children
　　$slots  和$scopedSlots
　　ref
　　跨组件通信
　　Provide和Inject router vuex store模式 eventbus  父子组件通信
　　prop
　　最常见的组件通信方式，由父组件向子组件传递。prop可接收一个数组或对象  //子组件   event
　　子组件向父组件发送通知，并传递参数
　　子组件 methods:{     // 通过 $emit向父组件发送一个通知     handleEvent(){       this.$emit(＂eventMsg＂, option)     }   }
　　父组件  methods:{     // 监听子组件定义的方法     eventMsg(option){       console.log(option);     }   }  style 和 class
　　父组件可以向子组件传递style 和 class ，style 和 class将合并到子组件根元素上
　　父组件  
　　子组件  
　　最终渲染结果          
Welcome to Your Vue.js App
      attribute
　　父组件在使用子组件时，在子组件上定义一些属性，这些属性将作用于子组件的根元素上，但是不包括style和class
　　父组件  
　　子组件  
　　最终渲染结果          
Welcome to Your Vue.js App
　　Tip：子组件可以通过定义 inheritAttrs：false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据
　　natvie修饰符
　　在注册事件时，父组件可以通过 navite 修饰符，将事件注册到子组件根元素上
　　父组件
　　
　　子组件     最终渲染结果  // 当点击app时。会触发父组件定义的 handleClick 方法  $listeners
　　子组件可以通过 $listeners 获取父组件传递过来的所有处理函数
　　v-model
　　父组件在使用子组件时，可以在子组件上绑定v-model，子组件通过定义model的prop和event还获取父组件定义的值
　　父组件
　　＂datas＂   />
　　子组件    sync 修饰符
　　和 v-model类似，用于双向数据绑定，不同点在于 v-model只能针对一个数据进行绑定，而 sync 修饰符没有限制
　　子组件
　　
　　父组件    $parent 和 $children
　　在组件内部，可以通过$parent 和$children属性，分别获取当前组件的父组件和子组件实例  
　　ref
　　在使用组件时，可以通过在组件上定义ref来获取组件实例     跨组件通信
　　provide 和 Inject
　　provide和inject 可以实现深层组件通信，顶层组件只需定义provide，底层组件通过inject接受数据
　　顶层组件 // 父组件 provide(){  msg:＂hello Children＂ },  // 子组件 inject: [＂msg＂] created () {  console.log(this.msg) // hello Children }  router
　　如果一个组将改变了地址栏，所有监听地址栏的组将都会做出相应的改变，  //监听路由变化 watch:{    $route(to,from) {      console.log(to,from);    } }  vuex
　　vuex 过于笨重，通常不建议在小型项目中使用，小型项目可以使用store 或 eventbus代替vuex，vuex本质上就是一个数据仓库。在此不做过多赘述，先挖一个坑，下回再叙。
　　store 模式
　　store模式其实就是一个普通的js模块，各组件可以导入该模块，将数据放到data里面，此时store就具有响应式了。  // 导出一个 store.js模块 export default {     userInfo:{...},     loginInfo:{...} }  // A子组件导入 store模块 import store from ＂./store.js＂ export default {   name:＂Acompon＂,   data(){     userInfo: store.userInfo   } }  // B子组件导入 store模块 import store from ＂./store.js＂ export default {   name:＂Bcompon＂,   data(){     loginInfo: store.loginInfo   } }
　　tip: store模式的缺点是无法跟踪数据的改变，因为所有组件都可以更改数据
　　eventbus
　　eventbus事件总线相当于一个桥梁，作为所有组将的一个事件中心，所有组件皆可往eventbus里面注册事件，也可以监听事件。  // 定义一个eventbus模块 import Vue from ＂vue＂ export const EventBus = new Vue()   // 在main.js里导入该模块并挂载到全局  // main.js import eventbus from ＂./eventbus.js＂ Vue.prototype.$eventBus = eventbus   所有子组件向eventbus里组 注册 或者 监听 事件    // 组件A 通过 $emit()注册事件 sendMsg() { this.$eventBus.$emit(＂aMsg＂, ＂from A＂); }  // 组件B 通过 $on 监听事件 this.$eventBus.$on(＂aMsg＂, (msg) => { // A发送来的消息 console.log(msg) // from A })  // 通过 $off() 可以关闭事件