vue3中provide和inject

2023-05-16

父子组件间数据通信

父组件 app.vue

import { reactive, provide, ref, watch } from 'vue';
export default {
	...
	setup () {
		const userFlag = ref(false);
        provide('userFlag', userFlag);
		 return {
		 	userFlag
		 }
	}
}

子组件A home.vue

<script>
import { inject, reactive } from 'vue';

export default {
    name: 'HeaderModule',
    setup () {
        const flag = inject('userFlag');
  
        return {
            flag,
        };
    }
};
</script>

子组件B header-module

import { inject, ref } from 'vue';
export default {
    setup () {
        const Flag = inject('userFlag');

        return {
            Flag
        };
    }
};
</script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue3中provide和inject 的相关文章

  • Vue常用的修饰符有哪些?分别有什么应用场景?

    一 修饰符是什么 在程序世界里 修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中 修饰符处理了许多DOM事件的细节 让我们不再需要花大量的时间去处理这些烦恼的事情 而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种
  • Vue3中的computed函数详解

    计算属性是Vue中常用的一种方式 主要用于在模板中放置逻辑计算 方便开发者进行数据操作和展示 在Vue3中 计算属性依然是非常重要的一种功能 而computed函数则更加的方便计算属性的使用 本文将对Vue3中的computed函数进行详细
  • Vue3的fragment

    vue2时 组件的模板结构中出现多个标签时 需要使用根标签 vue3时 组件的模板结构中出现多个标签时 可以不用根标签 这是因为vue3会自动将多个标签用fragment包裹 举个例子 main js import createApp fr
  • vue3项目修改浏览器的项目icon小图标

    修改vue3项目的浏览器的图标 vue2修改图标
  • uni-app微信小程序开发自定义select下拉多选内容篇

    欢迎点击领取 前端面试题进阶指南 前端登顶之巅 最全面的前端知识点梳理总结 分享一个使用比较久的 技术框架公司的选型 uni app uni ui vue3 vite4 ts 需求分析 微信小程序 uni ui内容 1 创建一个自定义的下拉
  • Vue3全局提示(Message)

    Vue2全局提示 Message 可自定义设置以下属性 自动关闭的延时 duration 类型 number 单位ms 默认 3000ms 消息距离顶部的位置 top 类型 number 单位px 默认 30px 调用一次只展示一个提示 调
  • vue3+ts深入组件(四)动态组件

    一 引入 掌握程度 了解 使用Vue时 有时会遇到tab切换 如下图 1 可实现方法 1 v if 2 component动态组件 3 使用vue Router 路由切换 2 对比 第一种方法 v if 这可能是我们能最快想到的解决办法 但
  • vue3 父子组件传参

    父向子传参 父组件
  • vue3配置eslint 出现问题

    vue3配置eslint 出现问题 标题必须使用导入来加载 ES 模块 ESlint Error Must use import to load ES Module 加上这一行即可
  • vue3-实现父子组件之间的通信(详解+源码)

    前言 vue3相对于vue2的父子传参方式有所改变 本文介绍三种 父组件给子组件传参 父组件调用子组件内的方法 子组件调用父组件的方法 如果不需要一种一种看可以直接下滑看全部代码 有注释也蛮好理解 一 父组件给子组件传参 1 父组件给子组件
  • 解决存储vuex数据,页面刷新后vuex数据被清空了的问题

    1 vuex刷新后数据会被清除 2 可以监听用户是否手动刷新页面 刷新之前先把vuex的数据存储在localStorage里面 页面加载时读取localStorage里的状态信息给vuex赋值 赋值后再清空localStorage 打开ap
  • 【Vue3】在Vue3中使用reactive定义的响应式失效

    Vue3 在Vue3中使用reactive定义的响应式失效 文章目录 Vue3 在Vue3中使用reactive定义的响应式失效 Vue3 在Vue3中使用reactive定义的响应式失效 后面查出原因 解决办法 总结 Vue3 在Vue3
  • vue3使用babel-plugin-import按需引入element-plus

    vue3使用babel plugin import按需引入element plus 2022年6月13日更新 用babel plugin import按需引入element plus会有问题 用官方推荐的方式真香了 以下是链接 https
  • 通过模块 xml 文件 Magento 添加一些块到产品视图页面

    您好 我正在开发一个简单的扩展 其中 我需要通过 xml 文件在产品页面上插入一个新块 下面是我的模块的xml文件
  • 如何将参数从 CDI 中的另一个类传递给注入的类?

    我是 CDI 新手 试图找到这个问题的解决方案 但是找不到任何解决方案 问题是假设我有一个正在注入的类 A 其中注入了一些值 toPass 现在我想将这个相同的值 toPass 传递给B类 B类是从A类注入的 public class A
  • Butterknife 8.4.0 - 未找到 ID 为“android-apt”的插件

    我不断收到错误消息Plugin with id android apt not found 这里出了什么问题 plugins id me tatarka retrolambda version 3 2 5 apply plugin com
  • 使用Spring将文本文件直接注入到String中

    所以我有这个 Value classpath choice test html private Resource sampleHtml private String sampleHtmlData Before public void rea
  • 为什么我需要一个用于自动连接/注入字段的设置器?

    我有一颗豆子
  • 如何使用全局键盘挂钩发送按键?

    我正在尝试将密钥发送到一个应用程序 该应用程序不响应我迄今为止使用的任何 API SendInput PostMessage SendMessage 等 然而 我测试了 Windows 的屏幕键盘实用程序并按下了我需要的键 并且应用程序轻松
  • @InjectMocks 之后为空

    在使用 JUnit 进行单元测试时 我在传递依赖项时遇到了一些麻烦 考虑这些代码 这是对我想要测试的类的依赖注入 我们称之为控制器 Inject private FastPowering fastPowering 这是单元测试 RunWit

随机推荐