问题：vue中父子组件、同级组件间如何通信？

vue中央事件总线这种方法适用于任何情况下的父子组件通信，同级别的组件通信相当于组件通信之间的万金油。 但是，在多人合作的情况下，代码的维护性很低。

在vue-cli上使用集中的事件管理机制：

步骤1 :在src中创建新的emit/emit.js， js文件的内容：

导入从' vue '；

varEmit=newvue({}；

导出{2}

Emit

}

在步骤src/main.js中引入

从import './emit/emit.js '

Vue.prototype.Emit=Emit；

示例： index.vue是父组件、两个子组件header.vue和footer.vue。

在mounted的生命周期中用this.Emit.$on ()进行监听。

在destroyed生命周期中，在this.Emit.$off (中解除绑定。 必须解除事件的绑定！

//父组件： index.vue :

模板

div类='索引扭曲'

标头/标头

福斯特/福斯特

/div

/模板

脚本类型='文本/Javascript '

从导入头'./头. vue '；

从导入者'./导入者. vue '；

导出默认值{

数据()。

返回

索引：0

}

(、

已安装()

this.emit.$ on ('来自标头'，this.indexFormHeader )；

this.emit.$ on ('来自追随者'，this.indexFromFooter )；

(、

//注意：销毁组件时，必须解除绑定事件：

已破坏

this.emit.$ off (从头)；

this.emit.$ off (从移动者)；

(、

组件：

标头

(、

方法：

indexformheader (值) {

控制台日志(来自头)；

控制台日志(值)

(、

indexFromFooter ()

console.log (从脚本) )。

}

}

}

/脚本

样式类型='文本/CSS '

/样式

次组件header.vue

通过this.Emit.$emit ()传递数据

//子组件header.vue

模板

div类=' headerpagewrap '

div @click='headerEmit'Emitdiv

/div

/模板

脚本类型='文本/Javascript '

导出默认值{

数据()。

返回

索引：0

}

(、

已安装()

this.Emit.$on('headertofooter '，this.headerFromFoot ) )。

(、

组件：

(、

方法：

头艾米特()

this.emit.$ emit ('来自头'，{值： ' 123 ' )； //能够传递数据

(、

headerFromFoot (

控制台日志(从)；

}

}

}

/脚本

样式类型='文本/CSS '

/样式

次组合footer.vue

//次组合footer.vue

模板

div类='福特erpagewrap '

div @click='footerEmit'Emitdiv

div @ click=' footeremittoheader ' emit div

/div

/模板

脚本类型='文本/Javascript '

导出默认值{

数据()。

返回

索引：0

}

(、

已安装()

(、

组件：

(、

方法：

福斯特艾米特()

this.emit.$ emit (从动画师)； //不传递数据

(、

福特里米蒂托赫德

this.emit.$ emit (头部机器人)； //不传递数据

}

}

}

/脚本

样式类型='文本/CSS '

/样式