对于 vue 来说, 组件是非常常见的, 有很多平台都封装了了属于自己一套的组件, 如 element ui,we ui 等等. 同时组件之间的消息传递也是非常重要的, 下面是我对组件之间消息传递的各种方式的总结, 共有 8 种方式. 如有不足之处, 可以留言补充, 互相学习.
1. props 和 $emit
这是最最常用的父子组件通信方式, 父组件向子组件传递数据是通过 prop 传递的, 子组件传递数据给父组件是通过 $emit 触发事件来做到的. 实例:
父组件
- Vue.component('parent',{
- template:`
父组件
- `,
- data(){
- return {
- message:'Hello web 秀'
- }
- },
- methods:{
- // 执行子组件触发的事件
- getChildData(val){
- console.log(val)
- }
- }
- })
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
子组件
- Vue.component('child',{
- // 得到父组件传递过来的数据
- props:['message'],
- data(){
- return {
- myMessage: this.message
- }
- },
- template:`
- `,
- methods:{
- passData(val){
- // 触发父组件中的事件
- this.$emit('getChildData',val)
- }
- }
- })
解析:
父组件传递了 message 数据给子组件, 并且通过 v-on 绑定了一个 getChildData 事件来监听子组件的触发事件;
子组件通过 props 得到相关的 message 数据, 最后通过 this.$emit 触发了 getChildData 事件.
2. $attrs 和 $listeners
第一种方式处理父子组件之间的数据传输有一个问题: 如果多层嵌套, 父组件 A 下面有子组件 B, 组件 B 下面有组件 C, 这时如果组件 A 想传递数据给组件 C 怎么办呢?
如果采用第一种方法, 我们必须让组件 A 通过 prop 传递消息给组件 B, 组件 B 在通过 prop 传递消息给组件 C; 要是组件 A 和组件 C 之间有更多的组件, 那采用这种方式就很复杂了. 从 Vue 2.4 开始, 提供了 $attrs 和 $listeners 来解决这个问题, 能够让组件 A 之间传递消息给组件 C.
C 组件
- Vue.component('C',{
- template:`
- `,
- methods:{
- passCData(val){
- // 触发父组件 A 中的事件
- this.$emit('getCData',val)
- }
- }
- })
B 组件
- Vue.component('B',{
- data(){
- return {
- myMessage:this.message
- }
- },
- template:`
- `,
- // 得到父组件传递过来的数据
- props:['message'],
- methods:{
- passData(val){
- // 触发父组件中的事件
- this.$emit('getChildData',val)
- }
- }
- })
A 组件
- Vue.component('A',{
- template:`
- this is parent compoent!
- :messageC="messageC"
- :message="message"
- v-on:getCData="getCData"
- v-on:getChildData="getChildData(message)">
- `,
- data(){
- return {
- message:'Hello',
- messageC:'Hello c'
- }
- },
- methods:{
- getChildData(val){
- console.log('这是来自 B 组件的数据')
- },
- // 执行 C 子组件触发的事件
- getCData(val){
- console.log("这是来自 C 组件的数据:"+val)
- }
- }
- })
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
解析:
C 组件中能直接触发 getCData 的原因在于 B 组件调用 C 组件时 使用 v-on 绑定了 $listeners 属性
通过 v-bind 绑定 $attrs 属性, C 组件可以直接获取到 A 组件中传递下来的 props(除了 B 组件中 props 声明的)
3. v-model
父组件通过 v-model 传递值给子组件时, 会自动传递一个 value 的 prop 属性, 在子组件中通过 this.$emit('input',val) 自动修改 v-model 绑定的值
子组件
- Vue.component('child',{
- props:{
- //v-model 会自动传递一个字段为 value 的 prop 属性
- value: String,
- },
- data(){
- return {
- myMessage:this.value
- }
- },
- methods:{
- changeValue(){
- // 通过如此调用可以改变父组件上 v-model 绑定的值
- this.$emit('input',this.myMessage);
- }
- },
- template:`
- type="text"
- v-model="myMessage"
- @change="changeValue">
- `
- })
父组件
- Vue.component('parent',{
- template:`
- this is parent compoent!
- {{message}}
- `,
- data(){
- return {
- message:'Hello'
- }
- }
- })
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
4. provide 和 inject
父组件中通过 provider 来提供变量, 然后在子组件中通过 inject 来注入变量. 不论子组件有多深, 只要调用了 inject 那么就可以注入 provider 中的数据. 而不是局限于只能从当前父组件的 prop 属性来获取数据, 只要在父组件的生命周期内, 子组件都可以调用.
子组件
- Vue.component('child',{
- inject:['for'],// 得到父组件传递过来的数据
- data(){
- return {
- myMessage: this.for
- }
- },
- template:`
- `
- })
父组件
- Vue.component('parent',{
- template:`
- this is parent compoent!
- `,
- provide:{
- for:'test'
- },
- data(){
- return {
- message:'Hello'
- }
- }
- })
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
5. 中央事件总线
上面方式都是处理的父子组件之间的数据传递, 那如果两个组件不是父子关系呢? 也就是兄弟组件如何通信?
这种情况下可以使用中央事件总线的方式. 新建一个 Vue 事件 bus 对象, 然后通过 bus.$emit 触发事件, bus.$on 监听触发的事件.
- Vue.component('brother1',{
- data(){
- return {
- myMessage:'Hello brother1'
- }
- },
- template:`
- this is brother1 compoent!
- `,
- methods:{
- passData(val){
- // 触发全局事件 globalEvent
- bus.$emit('globalEvent',val)
- }
- }
- })
- Vue.component('brother2',{
- template:`
- this is brother2 compoent!
brother1 传递过来的数据:{{brothermessage}}
- `,
- data(){
- return {
- myMessage:'Hello brother2',
- brothermessage:''
- }
- },
- mounted(){
- // 绑定全局事件 globalEvent
- bus.$on('globalEvent',(val)=>{
- this.brothermessage=val;
- })
- }
- })
- // 中央事件总线
- var bus=new Vue();
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
6. parent 和 children
- Vue.component('child',{
- props:{
- value:String, //v-model 会自动传递一个字段为 value 的 prop 属性
- },
- data(){
- return {
- mymessage:this.value
- }
- },
- methods:{
- changeValue(){
- this.$parent.message = this.mymessage;// 通过如此调用可以改变父组件的值
- }
- },
- template:`
- })
- Vue.component('parent',{
- template:`
- this is parent compoent!
- test
- `,
- methods:{
- changeChildValue(){
- this.$children[0].mymessage = 'hello';
- }// 在此我向大家推荐一个前端全栈开发交流圈: 619586920 突破技术瓶颈, 提升思维能力
- },
- data(){
- return {
- message:'hello'
- }
- }
- })
- var App=new Vue({
- el:'#app',
- template:`
- `
- })
7. boradcast 和 dispatch
vue1.0 中提供了这种方式, 但 vue2.0 中没有, 但很多开源软件都自己封装了这种方式, 比如 min ui,element ui 和 iview 等. 比如如下代码, 一般都作为一个 mixins 去使用, broadcast 是向特定的父组件, 触发事件, dispatch 是向特定的子组件触发事件, 本质上这种方式还是 on 和 on 和 emit 的封装, 但在一些基础组件中却很实用.
- function broadcast(componentName, eventName, params) {
- this.$children.forEach(child => {
- var name = child.$options.componentName;
- if (name === componentName) {
- child.$emit.apply(child, [eventName].concat(params));
- } else {
- broadcast.apply(child, [componentName, eventName].concat(params));
- }
- });
- }
- export default {
- methods: {
- dispatch(componentName, eventName, params) {
- var parent = this.$parent;
- var name = parent.$options.componentName;
- while (parent && (!name || name !== componentName)) {
- parentparent = parent.$parent;
- if (parent) {
- name = parent.$options.componentName;
- }
- }
- if (parent) {
- parent.$emit.apply(parent, [eventName].concat(params));
- }
- },
- broadcast(componentName, eventName, params) {
- broadcast.call(this, componentName, eventName, params);
- }
- }
- };
8. vuex 处理组件之间的数据交互
如果业务逻辑复杂, 很多组件之间需要同时处理一些公共的数据, 这个时候才有上面这一些方法可能不利于项目的维护, vuex 的做法就是将这一些公共的数据抽离出来, 然后其他组件就可以对这个公共数据进行读写操作, 这样达到了解耦的目的.
来源: http://developer.51cto.com/art/201904/594754.htm