当前位置：首页 > news >正文

永久免费自助建站源代码重庆网

news 2026/4/6 23:44:15

永久免费自助建站源代码,重庆网,江苏句容市疫情最新情况,广州制作网站哪家专业import { provide,inject } from vue provide：将父组件的数据传递给所有子组件（子孙都有）inject：接收provide 项目文件结构 App.vue是Header.vue的父组件，Header.vue是Nav.vue的父组件传值过程 App.vue <tem…

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>