vue组件之间的通信

前言作为一个vue初学者，你要了解的就是组件之间的数据通信（暂且不说vuex）。通信方法因组件之间的关系而异。组件关系分为三种：parent-->child，child-->parent，非父子parent-->child-parent通过props**父组件代码****子组件代码**Child-->有两种父子传递给父组件的组件。1.子组件改变父组件传过来的props（你会发现数据是通过props中的Object类型参数传递的，通过子组件可以改变数据内容。这种方法是可行的，但不推荐，因为prop官方定义是单向绑定）2.通过props传递$on和$emit****父组件代码**exportdefault{name:'header-box',props:{titleTxt:Object},data(){return{thisTitleTxt:this.titleTxt.name}},方法：{changeTitleTxt()}{this.titleTxt.name='Switch'}}}*通过$on,$emit***父组件代码****子组件代码**在非父子的简单情况下，我们可以使用一个空的Vue实例作为中央事件总线，（app实例也可以在这里使用而不是创建一个空Vue实例)**main.js**letbus=newVue()Vue.prototype.bus=busor**main.js**newVue({el:'#app',router,template:'',components:{App},beforeCreate(){Vue.prototype.bus=this}})**header组件****页脚组件**