前言
其中包含单纯传值、方法调用、传递节点数据等等解决方案，一共九种数据传输方式。每一种方案都尝试可行并且记录了用法，希望点进来的朋友能让你有所收获。
- props传参 父组件给子组件传值
- $emit事件 子组件向父组件广播事件
- slot插槽 父组件向子组件传递内容
- Middleware中间件 任意组件互相传值
- ref组件引用 使用引用的节点数据
- root根节点 数据存储到根节点
- prototype原型链 挂载数据到vue原型链
- inject依赖注入 依赖注入模式
- vuex状态管理 大型状态管理组件
一、props传参
父组件调用子组件时，父组件使用v-bind绑定值，子组件通过props接收，示例如下。
1.父组件调用子组件
注：v-bind可简写为:
<v-complate-wrap :local="local" />
2.子组件接收数据
props也可以作为一个数组直接使用，在这里使用规范写法，将props定义为一个对象。
props:{
local:{
type:String,
validator:v => ['top', 'right', 'bottom', 'left'].includes(v)
}
}
二、emit事件
一般用于跨组件的事件触发、函数调用，主要分为事件发射与事件监听两步。
1.$emit事件发射
子组件中通过$emit方法触发自定义事件
$emit('handleTrigger', obj)
2.v-on事件监听
注：v-on可简写为@
// 子组件调用时监听
<v-fence-list
v-if="mapType==='fence'"
@handleTrigger="handleTrigger"
></v-fence-list>
// methods中定义函数handleTrigger
handleTrigger（obj）{
console.log(obj)
// ...
}
三、slot插槽
插槽其实就是将父组件的内容（父组件调用子组件时标签里的内容）插入子组件。
1.父组件内容插入
插入的数据可以是字符串、dom节点等任意数据
<v-fence-list>
<br>slot content.
</v-fence-list>
2.子组件渲染时使用插槽
solt标签是一个标记点，意为将插入的数据放在这里。
<div>
插槽内容：
<slot></slot>
</div>
四、Middleware中间件
Middleware中间件其实就是一个自定义的js文件，在组件中引用了这个文件之后，可以监听中间件的特定事件，要通过中间件传参只需要驱动中间件的特定事件，接收组件监听这个事件即可事件驱动及数据传递。
1.定义中间件
import Vue from 'vue'
export default new Vue()
2.中间件的事件监听
import Middleware from 'Middleware'
Middleware.$on("stateChange",state => {
this.state = state;
});
3.中间件的事件驱动
Middleware.$emit('stateChange',state)
五、ref组件引用
ref主要用来传输页面标签节点类型的数据，项目中一般比较少见，如果仅仅用于传值建议使用其他方式。
1.父组件中定义一个ref
<v-hello ref="git"></v-hello>
2.子组件中获取这个ref值
console.log(this.$parent.$refs.git.value)
六、root根节点
直接将数据存至vue根节点，相当于vue项目中定义一个全局变量，一般不建议使用。
// 修改根节点数据
this.$root.language='cn'
// 读取根节点数据
console.log(this.$root.lanuage)
七、prototype原型链
1.prototype中定义全局变量
Vue.prototype.openFullScreen = function (time) {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => loading.close(), time);
}
2.调用取值
this.openFullScreen(2000);
八、inject依赖注入
用过angular的同学应该会很熟悉这种写法，其实就是将需要的模块、组件、方法做封装，在需要用到的地方（一般为一个组件）注入进去。
1.构造注入对象
provide方法中都是构造的注入对象。
provide() {
return {
getMap: this.mapType
}
}
2.注入对象并使用
export default {
inject: ['getMap'],
mounted() {
console.log(this.getMap);
}
}
九、vuex状态管理
大型项目状态管理必备，想要入坑可以点这里 vuex最小demo。
END
