Vue组件常用的六种通信方式

Vue.js 组件实例的作用域是相互独立的，不同组件之间的数据不能互相访问，组件有父级组件、子级组件、兄弟组件，如何选择组件之间的通信方式？针对常用的 props、$emit/$on、vuex、$parent/$children、$attrs/$listeners、provide/inject 进行讲解，对比各自的区别以及使用场景。

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

1. props

子组件使用props 接收父组件传递的值，子组件通过 $emit ，让父组件接收事件，改变父组件的data里面的值；

代码示例：

<!--父组件-->

<template>

 
<title
 :
title
=
'title'
 @
change
=
'changeHandle'
></title>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 title
:
 
'123'

 
};

 
},

 components
:
 
{

 title

 
},

 methods
:
 
{

 changeHandle
(
val
)
 
{

 
this
.
title 
=
 val
;

 
}

 
}

}

</script>



<!--子组件-->

<template>

 
<div
 @
click
=
'changeHandle'
>
{{title}}
</div>

</template>

<script>

export
 
default
 
{

 props
:
 
{

 title
:
 
String

 
},

 methods
:
 
{

 changeHandle
()
 
{

 
this
.
$emit
(
'change'
,
 
'456'
);

 
}

 
}

}

</script>

子组件通过事件向父组件传递值，父组件更改自己的数据，子组件接收更改后的值；

2. $emit/$on

通过Vue 的实例触发事件和监听事件，实现了跨级组件的通信；

代码示例：

<!--在Vue的原型链上添加$bus 属性，赋值为Vue实例-->

const EventBus = new Vue();

Object.defineProperties(Vue.prototype, {

 $bus: {

 get() {

 return EventBus;

 }

 }

});

window.globalVue = EventBus;



<!--使用-->

// 组件A

<template>

 
<div
 @
click
=
'changeHandle'
>
触发事件
</div>

</template>

<script>

export
 
default
 
{

 methods
:
 
{

 changeHandle
()
 
{

 window
.
globalVue
.
$emit
(
'change'
,
 
'456'
);

 
}

 
}

}

</script>



// 组件 B

<template>

 
<div>
监听事件
</div>

</template>

<script>

export
 
default
 
{

 mounted
()
 
{

 window
.
globalVue
.
$on
(
'change'
,
 str 
=>
 
{

 console
.
log
(
str
);

 
});

 
}

}

</script>

在组件B中监听固定的事件名，当A组件触发change事件后，监听到事件触发，触发事件时机不确定，一版在created 或 mounted 中监听事件；

3. Vuex

Vuex 是一个单向的数据流的状态管理模式，state 存放数据，当需要改变state 的数据时，只能通过 mutation 更改，如果有异步操作，可以使用 action，最终action 还是通过mutation 更改state 的数据。

• Vue Components：Vue 组件，可以执行dispatch 方法触发action；
• dispatch：组件触发action 的方法；
• actions：负责接收组件触发的行为，可以在这里面调用commit()方法更改state中的数据；
• commit：执行mutation的方法，commit('mutation 名称')；
• mutations：更改 state 数据的方法，只能进行同步操作；
• state：存储数据的容器对象；

代码演示：

<template>

 
<div>
{{title}}
</div>

</template>

<script>

import
 
{
mapState
}
 from 
'vuex'
;

export
 
default
 
{

 computed
:
 
{

 
...
mapState
({

 title
:
 state 
=>
 state
.
title

 
})

 
}

};

</script>

4. $parent/$children

$parent/$children 可以访问到父组件或子组件的实例，通过 $ref 也可以获取到子组件实例，可以访问子组件属性和方法；

代码实例：

<!--父组件A-->

<template>

 
<h1>
父组件
</h1>

 
<child
 
ref
=
'child'
></child>

</template>

<script>

export
 
default
 
{

 components
:
 
{

 child

 
},

 mounted
()
 
{

 console
.
log
(
this
.
$children
);
 
// 子组件实例数组

 console
.
log
(
this
.
$refs
.
child
);
 
// 子组件child实例

 
}

}

</script>





<!--子组件child-->

<template>

 
<h1>
子组件
</h1>

</template>

<script>

export
 
default
 
{

 mounted
()
 
{

 console
.
log
(
this
.
$parent
);
 
// 父组件实例

 
}

}

</script>

5. $attrs/$listeners

this.$attrs 包含了父作用域中不作为prop被识别的特性绑定(class和style除外)，解释就是，父组件传递了props ，但是子组件没有全部使用props 接收，没被子组件接收的那些props，在$attrs中就可以获取到；$listeners 即是包含了父作用域中的(不含.native修饰器的)v-on 事件监听器，可以使用 v-on='$listeners'传入到内部组件；在跨级组件中传递属性和事件非常有用；

代码示例：

<!--顶级组件A-->

<template>

 
<h1>
顶级组件A
</h1>

 
<!--子级组件B-->

 
<componentb
 
data1
=
'data1'
 
data2
=
'data2'
 @
event1
=
'handleEvent1'
 @
event2
=
'handleEvent2'
></componentb>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 data1
:
 
'data1'
,

 data2
:
 
'data2'

 
};

 
},

 components
:
 
{

 componentb

 
},

 mounted
()
 
{

 handleEvent1
()
 
{

 console
.
log
(
'子级组件触发的事件'
);

 
},

 handleEvent2
()
 
{

 console
.
log
(
'孙子级组件触发的事件'
);

 
}

 
}

}

</script>



<!--子组件B-->

<template>

 
<h1>
子组件B
</h1>

 data1的值：{{data1}}

 
<componentc
 
v-bind
=
'$attrs'
 
b-on
=
'$listeners'
></componentc>

</template>

<script>

export
 
default
 
{

 props
:
 
{

 data1 
// 这里只获取了父级传递的props 的data1属性

 
},

 components
:
 
{

 componentc

 
},

 mounted
()
 
{

 console
.
log
(
this
.
$attrs
);
 
// 打印 'data2'

 
}

}

</script>



<!--孙子组件c-->

<template>

 
<h1>
孙子组件c
</h1>

</template>

<script>

export
 
default
 
{

 props
:
 
{

 
'data2'

 
},

 mounted
()
 
{

 
this
.
$emit
(
'event2'
);

 
}

}

</script>

6. provide/inject

祖先组件通过 provide 向子孙级组件提供一个对象或返回一个对象的函数，该对象包含可以注入子孙组件的属性。

Vue 不建议直接应用于程序代码中，主要是为高阶插件/组件库提供使用

代码示例：

<!--祖先组件A-->

<template>

 
<h1>
祖先组件A
</h1>

 
<componenta></componenta>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'祖先组件A'

 
};
 

 
},

 components
:
 
{

 componenta

 
},

 provide
()
 
{

 
return
 
{

 
'father'
:
 
this

 
};

 
},

}

</script>



<!--子级组件A-->

<template>

 
<h1>
子级组件A
</h1>

 
<componentb></componentb>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'子级组件A'

 
};
 

 
},

 components
:
 
{

 componentb

 
},

 inject
:
 
[
'father'
],

 mounted
()
 
{

 console
.
log
(
this
.
father
.
name
);
 
// '祖先组件A'

 
}



}

</script>



<!--子孙级组件B-->

<template>

 
<h1>
子孙级组件B
</h1>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'子孙级组件B'

 
};
 

 
},

 inject
:
 
[
'father'
],

 mounted
()
 
{

 console
.
log
(
this
.
father
.
name
);
 
// '祖先组件A'

 
}



}

</script>

需要注意的是 provide 和 inject 绑定并不是可响应的;这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

比如下面这个例子：

<!--祖先组件A-->

<template>

 
<h1
 @
clidk
=
'changeName'
>
祖先组件A
</h1>

 
<componenta></componenta>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'祖先组件A'

 
};
 

 
},

 components
:
 
{

 componenta

 
},

 provide
()
 
{

 
return
 
{

 father
:
 
{

 name
:
 
this
.
name

 
}

 
};

 
},

 method
:
 
{

 changeName
()
 
{

 
this
.
name 
=
 
'祖先组件A改变了值了'
;

 
}

 
}

}

</script>





<!--子级组件A-->

<template>

 
<h1>
子级组件A
</h1>

 父级组件name值：{{father.name}}

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'子级组件A'

 
};
 

 
},

 components
:
 
{

 componentb

 
},

 inject
:
 
[
'father'
],

 mounted
()
 
{

 console
.
log
(
this
.
father
.
name
);
 
// '祖先组件A'

 
}



}

</script>

当父级组件触发了点击事件，将 name 值改变后，子级组件渲染的值并不会变化；

解决办法：

1. 祖先级组件提供子级的实例，在子孙级组件注入依赖，这样子孙级组件就可以访问到祖先级组件的属性，缺点是这个提供的实例挂了很多无用的属性和方法；
2. 使用 Vue2.6 的Vue.observable 方法；

代码示例：

<!--祖先组件A-->

<template>

 
<h1
 @
clidk
=
'changeName'
>
祖先组件A
</h1>

 
<componenta></componenta>

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
''

 
};
 

 
},

 components
:
 
{

 componenta

 
},

 provide
()
 
{

 
return
 
{

 father
:
 
{

 name
:
 
Vue
.
observable
({

 name
:
 
'祖先组件A'

 
})

 
}

 
};

 
},

 method
:
 
{

 changeName
()
 
{

 
this
.
name 
=
 
'祖先组件A改变了值了'
;

 
}

 
}

}

</script>





<!--子级组件A-->

<template>

 
<h1>
子级组件A
</h1>

 父级组件name值：{{father.name}}

</template>

<script>

export
 
default
 
{

 data
()
 
{

 
return
 
{

 name
:
 
'子级组件A'

 
};
 

 
},

 components
:
 
{

 componentb

 
},

 inject
:
 
[
'father'
],

 mounted
()
 
{

 console
.
log
(
this
.
father
.
name
);
 
// '祖先组件A'

 
}



}

</script>

当祖先级组件改变data值，子孙级组件就能获取数据更新值，重新渲染新值；

总结

1. 父子级通信推荐使用：props/$emit、$parent/$children/$refs、$attrs/$listeners
2. 兄弟组件通信推荐使用：$emit/$on、Vuex
3. 跨级组件通信推荐使用：provide/inject、$emit/$on、Vuex、$attrs/$listeners
   

原文链接;https://mp.weixin.qq.com/s/YXWLjrtqw_zYuSQKbZb9yQ
作者：前端大牛爱好者