vue provide & inject 解决 slot 通信问题

回顾用法

1. 跨级组件通信，在老的版本中由于没有使用到vuex插件，使得组件跨多层级的通信困难，通常都会使用provide & inject 与后代组件通信。详情请参照vue官网。
2. slot通信，对于我的理解就是，slot通信存在两张方式。
   • child : /// parent:
     这是最经典的用法，父集传递属性到子集slot
   • 看过element 源码的朋友都知道，例如我们想实现一个form组件

     	<x-form :labelWidth="120">
     		<x-form-item> ...... </x-form-item>
     		.....
     	<x-form>
     

     上面的代码是使用之前封装过的form组件，它的slot可以是任意组 件。当x-form传了一个label-width属性，x-form-item如何接收到 label-width 呢？

解析solt属性传递

以x-form的使用场景为例：

	// x-form.vue
	<template>
		<div>
			<slot/>
		</div>
	</template>
	<script>
	export default {
		props: {
			labelWidth: {
				type: Number
			}
		},
		// 把x-form.vue实例通信到slot
		provide() {
			return { attr: this }
		}
	}
	</script>

	// x-form-item.vue
	<template>
		<div>
			<label :style="labelWidth"></label>
			<input/>
		</div>
	</template>
	<script>
	export default {
		inject: ['attr'],
		computed: {
			labelWidth() {
				// 接受x-form.vue,并获取属性
				return {width: `${attr.labelWidth}px`}
			}
		}
	}
	</script>