11、组件传值：provide && inject

方式一：provide && inject

现在有3个页面，分别是home.vue、HelloWorldA.vue、HelloWorldB.vue
其中A是home的子组件，B是A的子组件

home.vue

<template>
	<div class="home">
		<h1>HOME</h1>
		<HelloWorldA></HelloWorldA>
	</div>
</template>
<script>
	import HelloWorldA from '../../components/HelloWorldA.vue'
	import { provide } from 'vue'
	export default {
		components: {
			HelloWorldA
		},
		setup() {
			let state = {
				name:'米斯特孙',
				age:26
			}
			provide('state',state)
		}
	}
</script>

HelloWorldA.vue

<template>
	<div class="hello">
		<div>HelloWorldA：{{state}}</div>
		<HelloWorldB></HelloWorldB>
	</div>
</template>
<script>
	import HelloWorldB from './HelloWorldB.vue'
	import { inject } from 'vue'
	export default {
		components: {
			HelloWorldB
		},
		setup() {
			let state = inject('state');
			return{
				state
			}
		}
	}
</script>

HelloWorldB.vue

<template>
	<div class="hello">
		<div>HelloWorldB：{{state}}</div>
	</div>
</template>
<script>
	import { inject } from 'vue'
	export default {
		setup() {
			let state = inject('state');
			return{
				state
			}
		}
	}
</script>

得到结果如下：

• provide() 和 inject() 可以实现嵌套组件之间的数据传递。
• 这两个函数只能在 setup() 函数中使用。
• 父级组件中使用 provide() 函数向下传递数据。
• 子级组件中使用 inject() 获取上层传递过来的数据。
• 不限层级
• 父组件可以通过ref或 reactive创建响应式数据通过provide共享给子组件

方式二：props

<!-- home.vue -->
<template>
	<div class="home">
		<h1>HOME</h1>
		<HelloWorldA title="父组件传给子组件中显示"></HelloWorldA>
	</div>
</template>
<script>
	import HelloWorldA from '../../components/HelloWorldA.vue'
	export default {
		components: {
			HelloWorldA
		},
	}
</script>

<!-- HelloWorldA.vue -->
<template>
	<div class="hello">
		<div>title:{{title}}</div>
	</div>
</template>

<script>
	export default {
		props:{
			title:String
		},
		setup(props, {emit}) {
			console.log(props);
			let title = props.title
			return {
				title
			}
		}
	}
</script>

• setup 函数中的第一个参数是 props。
• 正如在一个标准组件中所期望的那样 setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。