vue3 跨级传递数据

假设我们我们有3层组件 顶层,中间层,底层

如果我们的顶层想给底层传递数据

常规的我们可以用父传子的方式props,顶层传递给中间层,中间层再传给底层,如果中间有很多层,那不炸杠了吗

所以接下来要用vue3推出的provide和inject函数

我们在顶层用provide函数

html 复制代码
<script setup>
import CenterApp from '@/components/center-app.vue';
import {provide} from 'vue'
import {ref} from 'vue'

const count=ref(0)
provide('car','宝马')
provide('count',count)
provide('addcount',()=>{
  count.value++;
})
</script>

<template>
    <div>
        <h1>我是顶部组件</h1>
        <CenterApp></CenterApp>
    </div>
</template>

底层用inject函数来接收,可以接收常量,响应式变量,函数

html 复制代码
<script setup>
import {inject} from 'vue'
const car=inject('car')
const count=inject('count')
const addcount=inject('addcount')
</script>

<template>
    <div>
        <h3 >我是底部组件-----{{car}}-----{{count}}辆</h3>
        <button @click='addcount'>增加</button>
    </div>
</template>
相关推荐
pe7er22 分钟前
nuxtjs+git submodule的微前端有没有搞头
前端·设计模式·前端框架
七月的冰红茶30 分钟前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱掉发的小李1 小时前
前端开发中的输出问题
开发语言·前端·javascript
Dolphin_海豚1 小时前
一文理清 node.js 模块查找策略
javascript·后端·前端工程化
祝余呀1 小时前
HTML初学者第四天
前端·html
浮桥3 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥3 小时前
Vue框架之钩子函数详解
vue.js
七夜zippoe3 小时前
前端开发中的难题及解决方案
前端·问题
四季豆豆豆3 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
晓13134 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript