vue3__Provide / Inject (依赖注入)和mixins

一、 Provide提供和Inject 注入

Provide提供

<script setup>
import { provide } from 'vue'provide(/* 注入名 */ 'message', /* 值 */ 'hello!')
</script>

 例如父组件中提供方法

<template>
<div class="home">dfhualsf<div><button @click="favBtn()">增加</button></div><A></A>
</div>
</template><script setup>
import A from '../components/A.vue';let num = ref(12)const favBtn=function(){num.value=num.value+1}
provide('homeMethond',num)</script><style lang="scss">
.home {font-size: 32px;line-height: 50px;
}
</style>

Inject 注入

<script setup>
import { inject } from 'vue'const data= inject('message')
</script>

两个子组件中

<template>
<div class="A"><h1>A组件</h1>{{num}}<hr/><B></B>
</div>
</template><script setup>
import B from './B.vue';
import { inject } from 'vue';let anum=inject('homeMethond')</script><style lang="scss">
.A {font-size: 26px;
}
</style>
<template><div class="B"><h1>B组件</h1>{{bnum}} </div>
</template><script setup>
let bnum=inject('homeMethond')</script><style lang="scss">
.B{font-size: 26px;
}
</style>

此时当父组件的值发生变化的时候,子组件的也会同步变化 

二、 mixins(混入已经不推荐使用了)

1.创建mixins文件夹

2.创建mixins.js文件

import { Ref } from "vue";
export default function(){let num = ref(1)let fav=ref(false)const favBtn=function(){num.value+=1fav.value=truesetTimeout(()=>{fav.value=false},2000)}return {num,fav,favBtn}
}

 父组件

​
import { Ref } from "vue";
export default function(){let num = ref(1)let fav=ref(false)const favBtn=function(){num.value+=1fav.value=truesetTimeout(()=>{fav.value=false},2000)}return {num,fav,favBtn}
}​

A和B

<template>
<div class="A"><h1>A组件</h1>{{fav? '正在计算中':'计算完成'}}  {{num}}<div><button @click="favBtn()">增加</button></div>
</div>
</template><script setup>
import mixins from '../mixins/mixins.js';
let {num,fav,favBtn} =mixins()
</script><style lang="scss">
.A {font-size: 32px;
}
</style>

                        

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629988.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Qt优秀开源项目之二十一:遇见QSkinny,一个轻量级Qt UI库

目录 一.QSkinny简介 二.工作原理 三.编译 一.QSkinny简介 QSkinny库基于Qt Graphic View和Qt/Quick中少量的核心类。它提供了一组轻量级控件&#xff0c;可以在C或QML中使用这些控件。QSkinny默认是启用硬件加速的&#xff0c;非常适合嵌入式设备&#xff0c;目前已经应用于…

Python之assert断言介绍

python自动化测试中寻找元素并进行操作&#xff0c;如果在元素好找的情况下&#xff0c;相信大家都可以较熟练地编写用例脚本了&#xff0c;但光进行操作可能还不够&#xff0c;有时候也需要对预期结果进行判断。 常用 这里介绍几个常用断言的使用方法&#xff0c;可以一定程度…

iOS长按时无法保存图片问题解决方案

在使用iOS设备的用户中&#xff0c;相信很多人都有过在浏览网页时遇到长按时无法保存图片的困扰。这主要是因为网页开发者为了保护版权或隐私&#xff0c;默认屏蔽掉了图片长按时保存的功能。 具体来说&#xff0c;问题出在-webkit-touch-callout这个CSS属性上。这个属性用于定…

Vue3组件库开发 之Button(1)

需求分析&#xff1a; Button 组件大部分关注样式&#xff0c;没有交互 根本分析可以得到具体的属性列表&#xff1a; type:不同的样式(Default,Primary,Danger,Info,Success,Warning) plain:样式的不同展现模式boolean round:圆角boolean circle:圆形按钮&#xff0c;适合图标…

React入门 - 07(说一说 JSX 中的语法细节)

本章内容 目录 1、js 表达式2、列表渲染3、条件渲染4、className5、jsx 中的样式处理6、dangeouslySetInnerHTML7、htmlFor8、使用 jsx 的注意事项 上一节内容我们完成了一个简单的TodoList案例。到现在为止我们已经知道怎么在 JSX中使用 “js 表达式”和”列表渲染“了&#…

蓝桥杯 最长递增

输入 7 5 2 4 1 3 7 2 输出 3 思路 这个思路也很简单&#xff0c;后面大于前面&#xff0c;长度加一。当后面不大于前面的时候&#xff0c;就是一个新的递增序列了&#xff0c;递增序列的长度最小为1。 代码 #include <iostream> using namespace std; int main() {in…

Nginx初体验

文章目录 定义正向代理 & 反向代理安装与尝试 之前没怎么用过代理服务器Nginx&#xff0c;主要也是因为没有架构知识&#xff0c;根本不会去部署相关的机器。但是最近公司内部在调试的时候&#xff0c;经常用本机去充当Ngnix代理服务器&#xff0c;由于对这块知识掌握得还不…

leetcode—搜索二维矩阵II

编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,4,7,11,15],[2,5,8,12,19],[3,6,9,16,22],[10,13,14,17,2…

springboot(ssm校园便利平台 校园跑腿管理系统Java系统

springboot(ssm校园便利平台 校园便利店管理系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;ssm/springboot vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&#xff08;或8.0&#xff09; …

【计算机网络】网络层——详解IP协议

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】 本专栏旨在分享学习计算机网络的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 &#x1f431;一、I…

JavaScript三元运算的基本语法是什么?

JavaScript中的三元运算是一种简洁的if-else表达方式&#xff0c;其基本语法如下&#xff1a; condition ? exprIfTrue : exprIfFalse其中&#xff0c;condition是一个返回值为布尔类型的表达式&#xff0c;exprIfTrue和exprIfFalse是在条件为真或假时执行的表达式。如果cond…

第29集《佛法修学概要》

丁三、声闻乘 分二&#xff1a;戊一、释义&#xff1b;戊二、四谛法&#xff1b;戊三、结示 请大家打开讲义第八十二页。我们看丁三&#xff0c;声闻乘。 在祖师大德的判教当中&#xff0c;把我们整个大乘的成佛之道分成了三个部分&#xff1a;第一个是安乐道&#xff0c;第…

【链路层】点对点协议 PPP

目录 1、PPP协议的特点 2、PPP协议的组成和帧格式 3、PPP协议的工作状态 目前使用得最广泛的数据链路层协议是点对点协议PPP(Point-to-Point Protocol)。 1、PPP协议的特点 我们知道&#xff0c;互联网用户通常都要连接到某个 ISP 才能接入到互联网。PPP 协议就是用户计算机…

全罐喂养是什么意思?适合猫咪全罐喂养的猫罐头推荐

猫咪全罐喂养的风一直挺大的&#xff0c;但是有好多养猫人一直不知道全罐喂养是什么意思&#xff0c;作为铲龄6年的宠物店店长&#xff0c;从早几年就开始全罐喂养了&#xff0c;对各个品牌的猫罐头也都很熟悉。 作为铲屎官&#xff0c;我们都想要给我猫猫吃的更好&#xff0c…

排序算法-希尔排序(含C语言代码示例)

一、算法介绍 希尔排序是一种基于插入排序的高效、不稳定的排序算法&#xff0c;它通过对待排序序列进行一系列间隔划分的子序列排序来改进插入排序的性能。该算法的基本思想是先将整个序列分割成若干个子序列&#xff0c;然后分别对各个子序列进行插入排序。这一过程通过逐渐减…

Redis面试题17

Redis 是如何处理并发访问的&#xff1f;有没有并发控制机制&#xff1f; 答&#xff1a;Redis 是单线程的&#xff0c;它使用了基于事件驱动的模型来处理并发访问。Redis 使用一个主事件循环来监听并处理客户端的连接和操作请求。 对于并发访问&#xff0c;Redis 使用了以下几…

openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c

文章目录 openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c概述笔记END openssl3.2 - 官方demo学习 - signature - rsa_pss_hash.c 概述 对私钥对明文做签名(摘要算法为SHA256) 用公钥对密文做验签(摘要算法为SHA256) 笔记 /*! \file rsa_pss_hash.c \note openss…

[足式机器人]Part2 Dr. CAN学习笔记-Advanced控制理论 Ch04-16 Robust Controller非线性鲁棒控制器

本文仅供学习使用 本文参考&#xff1a; B站&#xff1a;DR_CAN Dr. CAN学习笔记-Advanced控制理论 Ch04-16 Robust Controller非线性鲁棒控制器 1. Slide Control 滑膜控制2 High Gain High Frequency3. 三种鲁棒控制器的比较如何分析控制器 Robust Control : tp achieve rob…

基于云平台技术的GPS定位的浅谈

基于云平台技术的GPS定位的创新主要体现在以下几个方面&#xff1a; 数据存储和处理&#xff1a;云平台可以提供大规模的数据存储和计算资源&#xff0c;能够实时处理大量的GPS定位数据&#xff0c;提高了定位系统的处理能力和响应速度。 动态扩展性&#xff1a;云平台的弹性伸…

鸿蒙开发笔记(九):渲染控制,if/else,ForEach,LazyForEach

ArkUI通过自定义组件的build()函数和builder装饰器中的声明式UI描述语句构建相应的UI。在声明式描述语句中开发者除了使用系统组件外&#xff0c;还可以使用渲染控制语句来辅助UI的构建&#xff0c;这些渲染控制语句包括控制组件是否显示的条件渲染语句&#xff0c;基于数组数据…