Vue中的provide/inject机制

推荐直接阅读文档，很详细https://cn.vuejs.org/v2/api/#provide-inject

可以看到initProvide在，inject、state后，created钩子前执行，代表了什么？

这就意味着已经可以使用当前组件内的大部分数据了。

主要看一下响应式数据、非响应式数据的区别

<!DOCTYPE html>
<html lang="zh">
	<body>
		<div id="app">
			<h1>
				{{PROJECT_NAME}}
				<br />
				{{appName}}
				<br />
				{{appVersson}}
			</h1>
			<parent />
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
	<script>
		const child = {
			inject: ['appName', 'PROJECT_NAME'],
			template: `<div style="color:red;">
			{{PROJECT_NAME}}
			<br />
			{{appName}} 【在parent组件,修改了分发内容】
			</div>`,
		};
		const parent = {
			inject: ['appName', 'appVersson', 'PROJECT_NAME'],
			// 更改分发内容
			provide() {
				return {
					appName: this.appName + '-from-parent',
				};
			},
			components: {
				child,
			},
			template: `<div style="color:blue;">
			{{PROJECT_NAME}}
			<br />
			{{appName}}
			<br />
			{{appVersson}} 【不是响应式的，上级传递的computed】
			<br/>
			<br/>
			<child/>
			</div>`,
		};
		const PROJECT_NAME = '哇哈哈的项目';
		const app = new Vue({
			el: '#app',
			components: {
				parent,
			},
			provide() {
				console.log(this);
				return {
					// 普通数据(无响应式)
					PROJECT_NAME2: PROJECT_NAME,
					PROJECT_NAME: this.PROJECT_NAME,
					// 响应式数据
					appName: this.appName, // 使用data中的数据
					appVersson: this.appVersson, // 使用computed中的数据，可以倒是可以，但不是响应式的。。
				};
			},
			data() {
				this.PROJECT_NAME = PROJECT_NAME;
				return {
					appName: 'app',
					now: Date.now(),
				};
			},
			computed: {
				appVersson() {
					return this.now;
				},
			},
			created() {
				setInterval(() => this.now = Date.now(), 1000);
			},
		});
	</script>
</html>

Vue中的provide/inject机制

猜你喜欢