Inject Provide @Inject @Provide

一、Inject与Provide

作用：父级与子孙组件传递数据

场景：由于vue有$parent属性可以让子组件访问父组件。但孙组件想要访问祖先组件就比较困难。通过provide/inject可以轻松实现跨级访问父组件的数据

使用：

// 父组件
<template>
	<div>
		<son></son>
	</div>
</template>
 
<script>
export default {
	name: 'parent',
	provide: {
		name: '这是个测试组件'
	}
}
</script>

// 子组件
<template>
	<div>
		{{name}}
        <Grandson/>
	</div>
</template>
 
<script>
export default {
	name: 'son',
	inject: [name]
}
</script>

// 子组件
<template>
	<div>
		{{name}}
	</div>
</template>
 
<script>
export default {
	name: 'Grandson',
	inject: [name]
}
</script>

二、@Inject与@Provide

概念：ts中的写法

// 父组件
import { Prop, Component, Provide } from 'vue-property-decorator';

@Component()
export default class xx extends Vue {
    @Provide('root') root={a:1}
}

// 子组件 要使用就用this.root
@Inject('root') root;

高级用法：

用symbol对象来做唯一key键

// 父组件
import { timelineRoot } from './timelineSymbol';
@Provide(timelineRoot)
get context() {
        return this.context;
}

// 子孙组件
@Inject(timelineRoot) context;

// timelineSymbol.js
export const timelineRoot = Symbol('Timeline.root');