Vue3 Provide&Inject

Vue3 Provide&Inject

基础用法

引用官网的一张图

看图就可以大致知道Provide和Inject的使用方式

父组件提供数据，子孙组件使用数据

使用方式也很简单：

<!--父组件-->
<script>
	export default {
		name: 'App',
		provide: {// 提供一个对象，里面包含了一个名为title的数据
			title: 'Hello,Vue3'
		}
	}
</script>

<!--子组件或深层次的组件-->
<template>
	<!--Hello,Vue3-->
	<div>{{title}}</div>
</template>

<script>
	export default {
		name: 'MyCom',
		// 从祖先组件中获取title数据
		inject: ['title']
	}
</script>

乍一看跟props类似，确实跟props差不多，但是比props高级

如果直接将数据从父组件传递给子组件使用props很方便

但是如果将数据从父组件传递给孙子组件或者更深层次的组件，使用props就会显得很繁琐

响应式使用方式

<!--父组件-->
<script>
	export default {
		name: 'App',
		data() {
          return {
          	userList: ['', '']
          }
		},
		provide() {
			return {
				title: Vue.computed(() => '用户数量：' + this.userList.length)
			}
		}
	}
</script>

<!--子组件或深层次的组件-->
<template>
	<div>{{title}}</div>
</template>

<script>
	export default {
		name: 'MyCom',
		// 当祖先组件data中的userList数量变化是title会响应data的变化
		inject: ['title']
	}
</script>