持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第28天，点击查看活动详情
前言
在现代web框架下开发的web应用，业务之间的隔离与调度是靠组件来实现的，组件间的参数设计，参数调用，事件分发等决定了组件能否更好的适应多变的现实业务，可扩展，低耦合，高内聚，一直是组件设计的原则之N。本文将以vue2为例，探讨组件的相关设计
参数传递的场景
参数传递可以分为两大类，一类是vue组件与js之间，一类是vue组件与vue组件之间。
- vue <--> js
- vue <--> vue
vue <--> js
这种一般常见于js扩展与vue组件之间的参数传递，一般来说，vue -> js 很简单，只需要引入和调用即可
import {getDate} from 'utils/util'
...
dealDate (t) {
return getDate(t, 'yyyy-mm-dd')
}
而js -> vue 则没那么容器，一般来说，有三种实现通信的方式
- vuex 通过vuex来实现状态管理
// xx.js
export getDate(t, type) {
store.commit('dealDate', xxxx)
}
- localstorage 通过本地缓存+ onstorage时间的方式，来进行通信
// xx.js
export getDate(t, type) {
localstorage.setItem('dealDate', xxxx)
}
// xx.vue
document.body.onstorage = function () { ...}
- 在声明函数时，通过参数的方式将vue实例传递进来
import {getDate} from 'utils/util'
...
dealDate (t) {
return getDate(t, 'yyyy-mm-dd', this)
}
// xx.js
export getDate(t, type, vm) {
vm.xxxx ...
}
vue <--> vue
vue之间进行参数传递相对会简单一些，但也会面临一些框架层面的限制，主要有以下几种参数传递方式
- 毫无关系的两个组件间 通过vuex进行传递
//组件A
methods: {
...mapMutations(['showTip'])
}
this.showTip('xxxx')
//vuex
mutaions: {
showTip (state, payload) { state.showTips = payload}
}
// 组件B
watch {
showTips () { // dosomething }
}
- 父子组件间 通过prop与emit进行传递
// 父
<child @do="doSome" :title="title" />
// 子
props：{
title: ''
}
methods: {
emitTitleName () {
this.$emit('do', 'heiheihei')
}
}
- 父和后代组件间，可以使用
provide和inject进行传递， 相当于在父级组件及其后代组件这个上下文内，暴露了全局变量，后代组件可以主动通过inject 的方式进行引用, 但是缺点是只能引用，没办法进行隔代通信。
//父
provie: ['searchParams']
// 孙
inject: ['searchParams']
总结
组件间参数设计传递方式时，不仅要考虑需要解决的业务场景，还要考虑不同实现间的限制与优势，技术里是没有一招鲜吃遍天的银弹的，所以需要结合业务情况，通盘考虑应该如何进行参数设计，什么样的传递方式与通信是合适的！
