12.vue3组件化开发(非父子组件之间的通信和插槽)

非父子组件之间的通信

1.方式一:Provide和Inject

Provide/Inject用于非父子组件之间共享数据.

一些深度嵌套的组件,子组件想要获取父组件的部分内容,需要将prop沿着组件层级逐渐传递,会非常繁琐.

利用Provide和Inject,无论层级多深,父组件都可以作为所有子组件的依赖提供者;
父组件有一个Provide选项来提供数据,
子组件有一个Inject选项来使用这些数据

父组件不需要知道它Provide的property被哪些子组件使用;子组件也不需要知道inject的property来自哪里.

(1)Provide和Inject基本使用

App.vue 的子组件为Home.vue ;Home.vue的子组件为 HomeContent.vue
在App.vue中定义数据,在HomeCotent中使用

HomeContent.vue:

<template>
	homecontent :{
  {name}} today is {
  {age}} years old
</template>

<script>
	export default{
		inject :["name","age"]
	}
</script>

<style scoped>
</style>

Home.vue:

<template>
	<home-content></home-content>
</template>

<script> 
import HomeC