【vue】跨组件通信--依赖注入

import { provide,inject } from 'vue'
- provide：将父组件的数据传递给所有子组件（子孙都有）
- inject：接收provide

项目文件结构

App.vue是Header.vue的父组件，Header.vue是Nav.vue的父组件

传值过程

在这里插入图片描述

App.vue

<template>
  <h2>App.vue-Top组件</h2>
  <p>user：{{ user }}</p>
  <button @click="userAdd">添加用户</button>
  <hr>
  <Header />
</template>

<script setup>
import { ref, reactive ,provide} from "vue";
import Header from "./components/Header.vue";

let user = ref(0);

const web = reactive({
  name: "1234567890",
  url: "https://www.1234567890.com"
})



const userAdd = () => {
  user.value += 1;
}

provide("provideWeb", web)
provide("provideUser", user)
provide("provideFuncUserAdd", userAdd)

</script>

<style lang="scss" scoped></style>

Header.vue

<template>
    <h2>header  Middle组件</h2>
    <p>接收App组件的user数据：{{ user }}</p>
    <hr>
    <Nav/>
</template>

<script setup>
import { inject } from 'vue'
import Nav from './Nav.vue'

const user = inject('provideUser')
</script>

<style lang="scss" scoped></style>

Nav.vue

<template>
    <h2>nav.vue Bottom组件</h2>
    <p>接收App组件的web数据：{{ web }}</p>
    <button @click="userAdd()">添加用户</button>

</template>

<script setup>
import { inject } from 'vue'

const web = inject('provideWeb')
const userAdd = inject('provideFuncUserAdd')
</script>

<style lang="scss" scoped>

</style>