第六十：跨组件通信-依赖注入（父传递给其他组件）

注意：　provide 通过 key 的形式发送给子组件

provide  // 是将　父组件所有东西传递给所有子组件

provide("provideWeb",{name:"邓瑞",url:"www.dengruicode.com"})// 传递对象数据

//传递响应式数据const user = ref(0)provide("provideUser",user)

注意：    //子组件通过inject注入父组件提供的 响应式数据　inject　接收父组件数据

inject

App.vue

<script setup>import { provide, ref } from 'vue'//导入子组件import Header from "./components/header.vue"//provide用于父组件将 数据 提供给所有子组件/*若使用了provide和inject来进行数据传递,则一般不需要再使用defineProps*/provide("provideWeb",{name:"邓瑞",url:"www.dengruicode.com"})//传递响应式数据const user = ref(0)provide("provideUser",user)//添加用户const userAdd = () => {user.value++}//用于父组件将 函数 提供给所有子组件provide("provideFuncUserAdd",userAdd)
</script><template><h3>App.vue-Top组件</h3>{{ user }}<!-- 子组件 --><Header/>
</template><style scoped></style>

header.vue

<script setup>import { provide, inject } from 'vue'//导入子组件import Nav from "./nav.vue"//子组件通过inject注入父组件提供的 响应式数据const user = inject("provideUser")console.log("provideUser:",user.value)//provide用于父组件将 数据 提供给所有子组件provide("provideUrl","dengruicode.com")
</script><template><h3>header.vue-Middle组件</h3><!-- 子组件 --><Nav/>
</template><style scoped></style>

nav.vue

<script setup>//子组件import { inject } from 'vue'//子组件通过inject注入父组件提供的 数据const web = inject("provideWeb")console.log("provideWeb:",web)const url = inject("provideUrl")console.log("provideUrl:",url)//子组件通过inject注入父组件提供的 函数const funcUserAdd = inject("provideFuncUserAdd")console.log("provideFuncUserAdd:",funcUserAdd)
</script><template><h3>nav.vue-Bottom组件</h3><button @click="funcUserAdd">添加用户</button>
</template><style scoped></style>