前言

除了使用Vuex方法，vue还提供了组件之间的各种通信方案。本文梳理了如何在父子组件、兄弟组件和祖先-后代组件之间进行通信。

父子组件通信

Props和$emit父子组件通信

有时，子组件需要与其父组件通信。通信方式是子组件的emit事件，父组件可以通过侦听此事件来采取进一步的操作。而父组件和子组件使用道具进行通信

假设引入了一个父组件和一个子组件my-comp:

my-comp v-for=' msgs中的msgs ' : key=' msg。id' : msg=' msg'/my-comp父组件有一系列需要由子组件呈现的msg数据，因此只需将msg作为道具传递给子组件即可：

从“@/components/mycom MP . vue”导入mycom MP导出默认{ name: 'home '，components: { MyComp }，Data(){ return { msgs :[{ ID : 1，Data :' Hello JS'}，{ID : 2，Data :' CSS World'}，{ID : 3，Data : '动画样式' }}}我们通过单击每个按钮触发一个事件

My-comp v-for=' msgs中的msg ' : key=' msg . id ' : msg=' msg ' : colored=' colored ' @ handle-change-color=' handle change color '/My-comp首先添加一个事件句柄-change-color。当此事件被触发时，它会修改名为color的数据，然后通过props将颜色传递给子组件：

从' @/components/my comp.vue '导入我的comp导出默认{name :' home '，components : {//register components mycamp }，Data(){ return { colored : false，//status msgs: [{id3360 1，data:' hello js'}，{id3360 2，data:' CSS world'}，{ id: 3，data: '动画样式This.colored //听事件的动态变化，colored }//handlechangecolor(param){//子组件触发的事件可能包含参数}}然后编辑子组件：

div @ div click=' handleClick ' : style=' { color } ' { { msg。id}}-{{msg。data}}/div/div首先呈现数据，并监视click事件。当单击触发事件处理程序handleclick时，

导出默认{name:' my comp '，computed: {color () {//color是返回this.colored的样式？Red' : 'black' //根据从父组件传入的道具动态修改样式} }，prop :[' msg '，' colored']，methods : { handleclick(e){ this。$emit(' handle-change-color ')//使用$ emit方法触发父组件handle-change-color事件//this。$emit('handler '，Param') //也可以将参数传递给事件。}}}子组件接收颜色的父组件传递的道具，返回一个计算属性color，并根据Color返回不同的样式。HandleClick处理当单击子组件元素时，$emit调度父组件的句柄变色事件

效果如下：

父组件$children操作子组件

使用$children操作子组件。与上面的示例一样，在父组件中定义了colored，它可以移动到子组件，并且父组件可以通过$children访问子组件：

template div @ click=' handle click ' class=' home ' my-comp v-for=' msg中的msgs ' : key=' msg。id ' :mg=' msg '/my-comp/div/template handleclick事件放在div中

从“@/components/MyComp . vue”导入mycamp导出默认值{ //.data () { return { msgs: [{ //.}] } }，methods : { HandleClick(){ this。$children.forEach(child={ child。$data.colored=！孩子。$data.colored //逐个控制子组件的$ data })} } }子组件中不需要$emit事件，只需要维护一个数据：

导出默认{name :' my comp '，data(){ return { colored : false//colored status } }，computed : { color(){ return this。有色人种？Red' :' black'}}，prop :[' msg ']}子组件$parent访问父组件

子组件可以通过$parent修改父组件的$data，因此在父组件中定义了颜色。

模板div class=' home ' my-comp v-for=' msgs中的msgs ' 3360 key=' msg。id ' : msg=' msg ' : colored=' colored '/my-comp/div/template通过prop将有色参数传递给子组件

从“@/components/mycom MP . vue”导入mycom MP导出默认{ name: 'home '，components: { MyComp }，data(){ return { colored : false，//父组件保持彩色状态msgs: [{ //.}]} }}父组件定义了彩色状态

template div @ click=' handleclick ' : style=' { color } ' { { msg . id } }-{ { msg . data } }/div/div/template子组件呈现msg并侦听单击事件

导出默认值{ //.props: ['msg '，' colored']，methods : { handleClick(e){ this。$家长。$data.colored=！这个。$家长。$data.colored} }}通过$parent访问父组件并修改$data状态

非父子组件通信

中央活动巴士

我们可以使用中央事件总线来处理非父组件和子组件之间的通信

具体步骤是创建一个Vue实例，然后$on监视事件和$emit调度事件

//src/eventbus.js从' vue '导入vue导出默认的新vue()首先创建并导出一个Vue实例

从“@/eventBus”导入总线导出默认值{//.方法： {handleclick (e) {bus。$emit ('change-color')}}}子代元素$emit触发事件总线的事件

从“@/eventbus”导入总线导出默认值{ //.挂载(){总线。$on('change-color '，()={ this.colored=！This.colored }) }}方法上的祖先元素$监听事件总线的事件

提供/注入

它适用于祖先和后代关系的组件之间的通信。祖先元素通过提供提供一个值，而后代元素通过注入获得这个值。默认情况下，该值是非响应性的，如果它是对象，则是响应性的：

导出默认{name:' home '，提供(){return {colored:this。colored//取决于数据} }，components: { MyComp }，Data () {return {colored: {//必须是object value: false }，msgs: [{//.首先，通过提供向外部提供一个颜色，这个属性依赖于数据中的颜色，而变量必须是一个对象，它是有响应的。

必须是一个对象

methods : { HandleChangeColor(){ this . colored . value=！this.colored.value}的祖先组件侦听事件或其他方式来修改数据更改状态。

导出默认值{ name: ' MyComp '，注入： ['colored']，//注入colored computed : { color(){ return this . colored . value？红色' : '黑色'/做更多.}},//.后代组件通过注入获得祖先组件提供的对象，并根据该对象采取进一步的动作。

$root直接访问根组件

根据官方文档，我们可以通过$root直接访问Vue实例

例如，在Vue实例中存储数据：

//src/main . jsnewvue({ data(){ return {//here！Colored: false}}，路由器，商店，render:h=h (app)})。$ mount(“# app”)，然后我们可以在所有其他组件中使用它：

导出默认{name :' my comp '，//.mounted () {console.log(这。$ root)//直接访问根组件}，//.}

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。谢谢你的支持。