vue组件通信--注意事项及经验总结

1,162 阅读11分钟

转自vue组件通信--注意事项及经验总结

说说在 Vue.js 中如何实现组件间通信(高级篇)

写在前面

组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计、开发、规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景

文章对相关场景预览

  • 父->子组件间的数据传递
  • 子->父组件间的数据传递
  • 兄弟组件间的数据传递
  • 组件深层嵌套,祖先组件与子组件间的数据传递

文章相关技术预览 prop、emit、bus、vuex、路由URL、provide/inject、children/parent、attrs/inheritAttrs

注:以下介绍与代码环境:vue2.0+、vue-cli2

父->子组件间的数据传递

父子组件的通信是开发是最常用的也是最重要的,你们一定知道父子通信是用prop传递数据的,像这样:

//父组件,传递数据
<editor :inputIndex="data" :inputName="王文健"></editor>
复制代码

//子组件,接受数据,定义传递数据的类型type与默认值default
    props: {
        inputIndex: {
            type: Object, 
            default: function(){
                return {}
            }
        },
        inputName: {
            type: String,
            default: ''
        },
复制代码

注意项

父组件传递数据时类似在标签中写了一个属性,如果是传递的数据是data中的自然是要在传递属性前加v-bind:,如果传递的是一个已知的固定值呢

  • 字符串是静态的可直接传入无需在属性前加v-bind
  • 数字,布尔,对象,数组,因为这些是js表达式而不是字符串,所以即使这些传递的是静态的也需要加v-bind,把数据放到data中引用,

如果prop传到子组件中的数据是一个对象的话,要注意传递的是一个对象引用,虽然父子组件看似是分离的但最后都是在同一对象下

  • 如果prop传到子组件的值只是作为初始值使用,且在父组件中不会变化赋值到data中使用

  • 如果传到子组件的prop的数据在父组件会被改变的,放到计算属性中监听变化使用。因为如果传递的是个对象的话,只改变下面的某个属性子组件中是不会响应式更新的,如果子组件需要在数据变化时响应式更新那只能放到computed中或者用watch深拷贝deep:true才能监听到变化

  • 当然如果你又需要在子组件中通过prop传递数据的变化做些操作,那么写在computed中会报警告,因为计算属性中不推荐有任何数据的改变,最好只进行计算。如果你非要进行数据的操作那么可以把监听写在watch(注意deep深拷贝)或者使用computed的getset如下图:![计算属性.png](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="www.w3.org/2000/svg" version="1.1" width="994" height="748"></svg>)

  • 但问题又来了,如果你传进来的是个对象,同时你又需要在子组件中操作传进来的这个数据,那么在父组件中的这个数据也会改变因为你传递的只是个引用, 即使你把prop的数据复制到data中也是一样的,无论如何赋值都是引用的赋值,你只能对对象做深拷贝创建一个副本才能继续操作,你可以用JSON的方法先转化字符串在转成对象更方便一点,

  • 所以在父子传递数据时要先考虑好数据要如何使用,否则你会遇到很多问题或子组件中修改了父组件中的数据,这是很隐蔽并且很危险的

子->父组件间的数据传递

在vue中子向父传递数据一般用**$emit**自定义事件,在父组件中监听这个事件并在回调中写相关逻辑

// 父组件监听子组件定义的事件
 <editor :inputIndex="index" @editorEmit='editorEmit'></editor>
复制代码

// 子组件需要返回数据时执行,并可以传递数据
this.$emit('editorEmit', data)
复制代码

那么问题来了,我是不是真的有必要去向父组件返回这个数据,用自定义事件可以在当子组件想传递数据或向子组件传递的数据有变化需要重新传递时执行,那么另外一种场景,父组件需要子组件的一个数据但子组件并不知道或者说没有能力在父组件想要的时候给父组件,那么这个时候就要用到组件的一个选项ref

<editor ref="editor" @editorEmit='editorEmit'></editor>

  • 父组件在标签中定义ref属性,在js中直接调用this.$refs.editor就是调用整个子组件,子组件的所有内容都能通过ref去调用,当然我们并不推荐因为这会使数据看起来非常混乱,
  • 所以我们可以在子组件中定义一种专供父组件调用的函数,,比如我们在这个函数中返回子组件data中某个数据,**当父组件想要获取这个数据就直接主动调用ref执行这个函数获取这个数据,**这样能适应很大一部分场景,逻辑也更清晰一点
  • 另外,父向子传递数据也可以用ref,有次需要在一个父组件中大量调用同一个子组件,而每次调用传递的prop数据都不同,并且传递数据会根据之后操作变化,这样我需要在data中定义大量相关数据并改变它,我可以直接用ref调用子组件函数直接把数据以参数的形式传给子组件,逻辑一下子清晰了
  • 如果调用基础组件可以在父组件中调用ref执行基础组件中暴露的各种功能接口,比如显示,消失等

兄弟组件间的数据传递

vue中兄弟组件间的通信是很不方便的,或者说不支持的,那么父子组件中都有什么通信方式呢

  • 路由URL参数

  • 在传统开发时我们常常把需要跨页面传递的数据放到url后面,跳转到另外页面时直接获取url字符串获取想要的参数即可,在vue跨组件时一样可以这么做, // router index.js 动态路由 { path:'/params/:Id', component:Params, name:Params } 复制代码

    // 跳转路由 跳转路由 复制代码

  • 在跳转后的组件中用$route.params.id去获取到这个id参数为12,但这种只适合传递比较小的数据,数字之类的

  • Bus通信

在组件之外定义一个bus.js作为组件间通信的桥梁,适用于比较小型不需要vuex又需要兄弟组件通信的

bus.js中添加如下

  import Vue from 'vue'export default new Vue
复制代码

组件中调用bus.js通过自定义事件传递数据

  import Bus from './bus.js'export default { 
      methods: {
         bus () {
            Bus.$emit('msg', '我要传给兄弟组件们')
         }
      }
  }
复制代码

兄弟组件中监听事件接受数据

    import Bus from './bus.js'export default {
        mounted() {
           Bus.$on('msg', (e) => {
             console.log(e)
           })
         }
       }
复制代码

注:以上两种使用场景并不高所以只是简略提一下,这两点都是很久以前写过,以上例子网上直接搜集而来如有错误,指正

  • Vuex集中状态管理 vuex是vue的集中状态管理工具,对于大型应用统一集中管理数据,很方便,在此对vuex的用法并不过多介绍只是提一下使用过程中遇到的问题

规范:对于多人开发的大型应用规范的制定是至关重要的,对于所有人都会接触到的vuex对其修改数据调用数据都应有一个明确严格的使用规范

  1. vuex分模块:项目不同模块间维护各自的vuex数据
  2. 限制调用:只允许action操作数据,getters获取数据,使用mapGetters,mapActions辅助函数调用数据![vuex.png](data:image/svg+xml;utf8,<?xml version="1.0"?><svg xmlns="www.w3.org/2000/svg" version="1.1" width="1136" height="1280"></svg>)

对于vuex的使用场景也有一些争论,有人认为正常组件之间就是要用父子组件传值的方式,即使子组件需要使vuex中的数据也应该由父组件获取再传到子组件中,但有的时候组件间嵌套很深,只允许父组件获取数据并不是一个方便的方法,所以对于祖先元组件与子组件传值又有了新问题,vue官网也有一些方法解决,如下

祖先组件与子组件间的数据传递

provide/inject 除了正常的父子组件传值外,vue也提供了provide/inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效

官网实例

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
}
复制代码
  • provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。

  • 一个字符串数组,或 一个对象,对象的 key 是本地的绑定名,value 是:

  • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或 一个对象,该对象的:

  • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)

  • default 属性是降级情况下使用的 value

提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。 具体细节移步vue相关介绍cn.vuejs.org/v2/api/#pro…

provide/inject还未在项目中应用过,后面会做尝试


补充 $attrs/inheritAttrs

经小伙伴们提醒补充$attrs的使用

场景:祖先组件与子组件传值

  • 如果是props的话,就必须在子组件与祖先组件之间每个组件都要prop接受这个数据,再传到下一层子组件,这就很麻烦,耦合深程序臃肿
  • 如果用vuex确实显得有点小题大做了,所以用$attrs直接去获取祖先数据也不错

包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

以上是官网对$attrs的解释,我刚看我也是一脸懵逼,回去试了一下其实并不难,而且比较适用组件深层嵌套场景下,祖先组件向子组件传值的问题

意思就是父组件传向子组件传的,子组件不prop接受的数据都会放在attrs中,子组件直接用this.attrs获取就可以了。如过从父->孙传,就在子组件中添加v-bind='$attrs',就把父组件传来的子组件没props接收的数据全部传到孙组件,具体看以下代码

使用:

祖先组件

// 祖先组件
// 在祖先组件中直接传入output和input
<template>
  <div>
    <child1 :output='output' :input="input"></child1>
  </div>
</template>
<script>
import child1 from './child1.vue'export default {
  components: {
    child1
  },
  data () {
    return {
      input: 'jijijijjijiji',
      output: {
        name: '王文健',
        age: '18'
      }
    }
  }
</script>
复制代码

子组件

<template>
  <div
    <h1>{{input}}</h1>
    <child2 :child="child" v-bind='$attrs'></child2>
  </div>
</template>
<script>
import child2 from './child2.vue'export default {
  components: {
    child2
  },
  props: {
    input: [String]
  },
  data () {
    return {
      child: 'child1child1child1child1s'
    }
  },
// 默认为true,如果传入的属性子组件没有prop接受,就会以字符串的形式出现为标签属性
// 设为false,在dom中就看不到这些属性,试一下就知道了
  inheritAttrs: false,
  created () {
    // 在子组件中打印的$attrs就是父组件传入的值,刨去style,class,和子组件中已props的属性
    console.log(this.$attrs)  // 打印output
  }
}
</script>

复制代码

孙组件

<template>
  <div>
    {{$attrs.output.name}}
  </div>
</template>
<script>
export default {
  created () {
    // 打印output和child
    console.log(this.$attrs)
  }
}
</script>

复制代码

看起来还是挺好用的,还没在具体项目中用过,相信不久会用到的,如果还有什么问题欢迎留言

children/parent

当然你可以直接用children/parent获取当前组件的子组件实例或父组件实例(如果有的话),也能对其做些操作,不过并不推荐这么做

你还可以放到localStorage,sessionStorage,cooikes之类的存在本地当然也能做到组件间的通信


之前说过,可以使用 props 将数据从父组件传递给子组件。其实还有其它种的通信方式,下面我们一一娓娓道来。

1 自定义事件

通过自定义事件,我们可以把数据从子组件传输回父组件。子组件通过 $emit() 来触发事件,而父组件通过 $on() 来监听事件,这是典型的观察者模式。

html:

<div id="app">
    <p>总数:{{total}}</p>
    <deniro-component @increase="setTotal"
                      @reduce="setTotal"
    ></deniro-component>
</div>
复制代码

js:

Vue.component('deniro-component', {
	template: '\
	<div>\
	<button @click="increase">+1</button>\
	<button @click="reduce">-1</button>\
	</div>',
	data: function () {
		return {
			counter: 0
		}
	},
	methods: {
		increase: function () {
			this.counter++;
			this.$emit('increase', this.counter);
		},
		reduce: function () {
			this.counter--;
			this.$emit('reduce', this.counter);
		}
	}
});

var app = new Vue({
	el: '#app',
	data: {
		total: 0
	},
	methods: {
		setTotal: function (total) {
			this.total = total;
		}
	}
});
复制代码

效果:

示例中有两个按钮,分别实现加 1 与减 1 操作。点击按钮后,执行组件中定义的 increase 或 reduce 方法,在方法内部,使用 $emit 把值传递回父组件。 $emit 方法的第一个参数是使用组件时定义的事件名,示例中是 @increase@reduce

<deniro-component @increase="setTotal"
				  @reduce="setTotal"
></deniro-component>
复制代码

这两个事件又绑定了 setTotal 方法,该方法修改了 total 值。 $emit 方法的其它参数是需要回传给父组件的参数。

也可以使用 v-on.native 来监听原生事件,比如这里监听组件的点击事件:

html:

<div id="app">
    ...
    <deniro-component ...
                      @click.native="click"
    ></deniro-component>
</div>
复制代码

js:

...
var app = new Vue({
	el: '#app',
	data: {
		total: 0
	},
	methods: {
		...
		click: function () {
			console.log("原生点击事件");
		}
	}
});
复制代码

这样,点击按钮后,就可以捕获原生的点击事件啦O(∩_∩)O~

**注意:**这里监听的是这个组件根元素的原生点击事件。

2 v-model 方式

也可以使用 v-model 方式来直接绑定父组件变量,把数据从子组件传回父组件。

html:

<div id="app2">
    <p>总数:{{total}}</p>
    <deniro-component2 v-model="total"
    ></deniro-component2>
</div>
复制代码

js:

Vue.component('deniro-component2', {
	template: '\
	<div>\
	<button @click="click">+1</button>\
	</div>',
	data: function () {
		return {
			counter: 0
		}
	},
	methods: {
		click: function () {
			this.counter++;
			this.$emit('input', this.counter);
		}
	}
});

var app2 = new Vue({
	el: '#app2',
	data: {
		total: 0
	}
});
复制代码

效果:

我们使用 v-model="total" 直接绑定变量 total。接着在子组件中,在 $emit 方法传入事件名 input,这样 Vue.js 就会自动找到 `v-model 绑定的变量啦O(∩_∩)O~

我们也可以使用自定义事件来实现上述示例——

html:

<div id="app3">
    <p>总数:{{total}}</p>
    <deniro-component3 @input="setTotal"
    ></deniro-component3>
</div>

复制代码

js:

Vue.component('deniro-component3', {
	template: '\
	<div>\
	<button @click="click">+1</button>\
	</div>',
	data: function () {
		return {
			counter: 0
		}
	},
	methods: {
		click: function () {
			this.counter++;
			this.$emit('input', this.counter);
		}
	}
});

var app3 = new Vue({
	el: '#app3',
	data: {
		total: 0
	},
	methods: {
		setTotal: function (total) {
			this.total = total;
		}
	}
});
复制代码

效果与上例相同。

我们还可以在自定义的表单输入组件中利用 v-model,实现数据双向绑定:

html:

<div id="app4">
    <p>总数:{{total}}</p>
    <deniro-component4 v-model="total"
    ></deniro-component4>
    <button @click="increase">+1</button>
</div>
复制代码

js:

Vue.component('deniro-component4', {
	props: ['value'],
	template: '<input :value="value" @input="update">+1</input>',
	data: function () {
		return {
			counter: 0
		}
	},
	methods: {
		update: function (event) {
			this.$emit('input', event.target.value);
		}
	}
});

var app4 = new Vue({
	el: '#app4',
	data: {
		total: 0
	},
	methods: {
		increase: function () {
			this.total++;
		}
	}
});
复制代码

效果:

这里我们首先利用 v-model,在自定义组件中绑定了 total 变量。然后在组件内部,定义了 props 为 ['value']注意这里必须为 value,才能接收绑定的 total 变量。接着在组件模板中把接收到的 value 值(即 total 变量值),作为 <input> 元素的初始值,并绑定 input 事件。下一步,在 input 事件中,通过 this.$emit('input', event.target.value) 把 total 值传回父组件的 <button @click="increase">+1</button>。最后在 increase 方法中,递增 total 值。

这个示例,我们综合使用了 props 、v-model和自定义事件,实现了数据的双向绑定。

总的来说,一个具有双向绑定的 v-model 组件具有以下特征:

  1. 使用 props 接收父组件的 value。
  2. 子组件中拥有可以更新 value 的 HTML 元素,当更新 value 时,触发 input 事件。事件内部使用 $emit 将新的 value 值回传给父组件。

3 非父子组件

非父子组件指的是兄弟组件或者跨多级组件。

3.1 中央事件总线

我们可以创建一个空的 Vue 实例作为中央事件总线,实现非父子组件之间的通信。

html:

<div id="app5">
    <p>监听子组件消息:{{message}}</p>
    <deniro-component5></deniro-component5>
</div>
复制代码

js:

var bus = new Vue();
Vue.component('deniro-component5', {
	template: '<button @click="sendMessage">发送消息</button>',
	methods: {
		sendMessage: function () {
			bus.$emit('on-message', '来自于 deniro-component5 的消息');
		}
	}
});
var app5 = new Vue({
	el: "#app5",
	data: {
		message: ''
	},
	mounted: function () {
		var that = this;

		bus.$on('on-message', function (message) {
			that.message = message;
		})
	}
});
复制代码

注意: 因为 bus.$on() 中的函数,this 指向的是本身,所以我们必须在外层定义一个 that,让它引用 mounted 对象。

效果:

首先创建了一个空的 Vue 实例作为中央事件总线。然后在定义的子组件绑定的 click 事件中,通过 bus.$emit() 发送消息。接着在初始化 app 实例的 mounted 函数时,使用 bus.$on() 方法监听消息。

这种方式可以实现组件间任意通信。我们还可以扩展 bus 实例,为它添加 data、methods、computed 等属性,这些都是公共属性,可以共用。所以在此可以放置需要共享的信息,比如用户登陆昵称等。使用时只需要初始化一次 bus 即可,所以在单页面富客户端中应用广泛。

如果项目较大,那么可以使用具有状态管理的 vuex 哦O(∩_∩)O~

3.2 父子链

子组件可以使用 this.$parent 来访问父组件实例;而父组件可以使用 this.$children 来访问它的所有子组件实例。这些方法可以递归向上或向下,直到根实例或者叶子实例。

html:

<div id="app6">
    <p>消息:{{message}}</p>
    <deniro-component6></deniro-component6>
</div>
复制代码

js:

Vue.component('deniro-component6', {
	template: '<button @click="sendMessage">发送消息</button>',
	methods: {
		sendMessage: function () {
			//通过父链找到父组件,修改相应的变量
			this.$parent.message='来自于 deniro-component6 的消息';
		}
	}
});
var app6 = new Vue({
	el: "#app6",
	data: {
		message: ''
	}
});
复制代码

效果:

**注意:**只有在万不得已的情况下,才使用父子链,实现组件间任意通信。因为这样做,会让两个组件之间紧耦合,代码变得难理解与维护。如果只是父子组件之间的通信,尽量采用 props 与自定义事件 $emit 来实现。

3.3 子组件索引

如果一个组件的子组件较多且是动态渲染的场景,使用 this.$children 来遍历这些子组件较麻烦。这时就可以使用 ref 来为子组件指定索引名称,方便后续查找。

html:

<div id="app7">
    <button @click="getChild">获取子组件实例</button>
    <deniro-component7 ref="child"></deniro-component7>
</div>
复制代码

js:

Vue.component('deniro-component7', {
	template: '<div>deniro-component7</div>',
	data: function () {
		return {
			message: '登陆不到两周,InSight探测器意外捕捉到火星的风声'
		}
	}
});
var app7 = new Vue({
	el: "#app7",
	methods: {
		getChild: function () {
			//使用 $refs 来访问组件实例
			console.log(this.$refs.child.message);
		}
	}
});
复制代码

输出结果:

登陆不到两周,InSight探测器意外捕捉到火星的风声

注意:$refs 只在组件渲染完成后才会被赋值,而且它是非响应式的。所以只有在万不得已的情况下才使用它。

本文示例代码


总结如下: 通信方式通信方向props【推荐】父组件到子组件自定义事件 $emit【推荐】子组件到父组件中央事件总线【推荐】组件间任意通信父子链组件间任意通信子组件索引父组件到子组件