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

vue2中使用mixins(混入)和vue3中使用composable

文章目录

  • 一、mixins混入
    • 1、 新建mixins文件夹,新建myMixins.js
    • 2、myMixins.js 文件
    • 3、index.vue 文件(要使用的文件)
  • mixins 总结
  • 二、composable(组合式api composition )
    • 1、 新建composables文件夹,新建useEdit.js
    • 2、useEdit.js 文件
    • 3、index.vue 文件(要使用的文件)
    • composable总结
  • 总结


一、mixins混入

1、 新建mixins文件夹,新建myMixins.js

src --> mixins --> myMixins.js
在这里插入图片描述

2、myMixins.js 文件

里面就和vue文件一样使用data、method、 watch…
在这里插入图片描述

3、index.vue 文件(要使用的文件)

就是你要使用mixins 混入的文件中,引入,注册该文件,即可使用。

在这里插入图片描述

mixins 总结

优点:不同组件引入 mixins 之后,会生成不同的实例,数据会相互隔离,互不影响
注意点:
1:引入mixins 的同时,组件中重复定义,mixins 中的属性方法会被覆盖。
2:使用 mixins 之后,该组件包含 mixins 中的所有数据,并且可以使用 this 进行访问。

二、composable(组合式api composition )

1、 新建composables文件夹,新建useEdit.js

useEdit.js就是一个列表编辑页,然后拆分了一下编辑的逻辑到composables组合式api中
文件路径:src --> composables–> useEdit.js

在这里插入图片描述

2、useEdit.js 文件

里面就是编辑的数据和方法,需要注意的是:需要用return将方法返回出去。因为是一个函数嘛。

// 编辑页
export default function useEdit(router) {// 编辑页面的数据const editData = reactive({name: '',age: 18,data: {},});// 返回年龄的方法function getAge () {return '今年' + editData.age +'岁了。'};return {editData,getAge,}
}

3、index.vue 文件(要使用的文件)

这里是一个伪代码哈,就直接展示了一下如何引入的(解构赋值的方式),引用后就可以在index.vue页面随意的使用引入的方法了。

<script setup lang="ts">
import useEdit from '../composables/useEdit'
const route = useRoute();
// 编辑页面的逻辑
// router 就是跳转路由的,可以作为参数传到函数中进行使用
const { editData,  getAge,} = useEdit(router);
</script><template><div></div>
</template><style lang="less" scoped>
</style>

composable总结

在这里插入图片描述

总结

总体而言,vue3 的 composable 和vue2 的mixins 使用是差不多的,都是通过函数return返回定义的数据,通过在index.vue(也就是你要使用的页面,可以有多个页面)引入后就可以直接使用的一种拆分数据的方式。
至于优点都是一样的:不同组件引入 mixins / composable 之后,会生成不同的实例,数据会相互隔离,互不影响。

相关文章:

vue2中使用mixins(混入)和vue3中使用composable

文章目录 一、mixins混入1、 新建mixins文件夹&#xff0c;新建myMixins.js2、myMixins.js 文件3、index.vue 文件&#xff08;要使用的文件&#xff09; mixins 总结二、composable(组合式api composition )1、 新建composables文件夹&#xff0c;新建useEdit.js2、useEdit.js…...

通过OpenTelemetry上报Python-flask应用数据(阿里云)

参考文档 https://help.aliyun.com/document_detail/611711.html?spma2c4g.90499.0.0.34a056ddTu2WWq 先按照 方法一&#xff1a;手动埋点上报Python应用数据 步骤测试上报是否正常。 flas 上报 在 手动埋点上报Python应用数据 的基础上&#xff0c;上报flask应用的数据&#…...

使用node搭建服务器,前端自己写接口,将vue或react打包后生成的dist目录在本地运行

使用node.jsexpress或者使用node.jspm2搭建服务器&#xff0c;将vue或react打包后生成的dist目录在本地运行 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错&#xff0c;无法运行起来。 通常我是放到后端搭建的服务上面去运行&#xff0c;当时前端…...

一篇文章搞懂如何使用JDBC操作数据库,还有JDBC进阶操作

目录 简介什么是JDBC如何使用JDBC1、获取连接2、操作数据3、关闭连接&#xff0c;释放资源使用技巧 查询操作创建表&#xff0c;插入模拟数据使用Java查询数据的数据SQL注入问题使用PreparedStatement查询 更新操作插入插入并获取主键更新删除 JDBC事务JDBC的批量操作JDBC连接池…...

9.3.2.1网络原理(UDP)

1.UDP的基本特点:无连接,不可靠传输,面向数据报,全双工. 2.1~1024的端口号有特定的含义,不建议使用.比如21:ftp,22:ssh,80:http,443:https. 3.CRC校验算法:循环冗余校验和,把UDP报中的每个字节都依次进行累加,把累加的结果,放到两个字节的变量中,溢出也无所谓,因为都加了一遍.…...

21、stm32使用LTDC驱动LCD

注&#xff1a;本文基于stm32使用FMC驱动SDRAM(IS42S32800G-6BLI)工程继续开发 本例使用安富莱的H743XIH板子驱动LTDC点亮7寸LCD 硬件接线&#xff1a;RGB888 一、cubemx配置 1、LTDC配置 注意此引脚应于上面的硬件接线图一致 2、配置DMA2D 3、背光引脚和触摸引脚 4、时钟…...

合并两个有序链表

就像一个贪吃蛇将两个链表一一的吃进来 class Solution(object):def mergeTwoLists(self, list1, list2):""":type list1: Optional[ListNode]:type list2: Optional[ListNode]:rtype: Optional[ListNode]"""p ListNode(0)cur pwhile list1 a…...

深入了解Unity的Physics类:一份详细的技术指南(七)(上篇)

前言 Unity的Physics类是Unity物理系统的核心&#xff0c;提供了一套用于处理和控制物理模拟的API。这个类提供了用于控制物理系统的全局属性和方法&#xff0c;以及检测和施加力到游戏对象&#xff0c;处理碰撞和触发器事件等。为了让开发者都能更好理解这个Physics类&#x…...

数据结构与算法-数组(附阿里面试题)

一 面试经典&#xff1a; 给你一个文件里面包含全国人民&#xff08;14亿&#xff09;的年龄数据&#xff08;0~180&#xff09;&#xff0c;现在要你统计每一个年龄 有多少人&#xff1f; 给定机器为 单台2CPU2G内存。不得使用现成的容器&#xff0c;比如map等。&am…...

k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)

前面已经提到&#xff0c;在初始化 k8s-master 时并没有网络相关配置&#xff0c;所以无法跟 node 节点通信&#xff0c;因此状态都是“NotReady”。但是通过 kubeadm join 加入的 node 节点已经在k8s-master 上可以看到。 那么&#xff0c;这个时候我们该怎么办呢&#xff1f;…...

有血有肉的PPT

1、PPT是Powerpoint缩写 2、引申的含义是Powerpoint Power(力量/能量&#xff09; Point(观点/要点) 3、用PPT做的文档是讲演稿&#xff0c;讲演的内容要有力度&#xff0c;之所以要去演讲是为了能够影响受众 4、其次演讲稿上的内容要列出要点、表明观点&#xff0c;所以一般P…...

使用C语言实现UDP消息接收

目录 简介:步骤:步骤 1: 创建套接字步骤 2: 接收消息步骤 3: 完成 函数及变量解释总结: 简介: 在网络通信中&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接协议&#xff0c;它提供了一种快速、高效的数据传输方法。本文将向您展示如何使用C语言编…...

图片加水印

基础 基于&#xff1a;https://github.com/chishaxie/BlindWaterMark#blindwatermark 前置 安装python&#xff0c;操作系统为ubuntu 18.04.4 server 说明&#xff1a;python2 不行&#xff0c;已验证不行的版本是2.7.17&#xff0c;建议使用ubuntu 18.04.4 server对应的py…...

Nginx代理接口访问返回404

Nginx代理接口访问返回404 一、背景 因为不同业务系统间有接口调用&#xff0c;存在跨域问题&#xff0c;为了解决同源策略&#xff0c;需要将接口通过nginx去转发&#xff0c;但是配置完后通过postman请求一直存在访问404的问题。 访问地址&#xff1a;https://a.test.com/n…...

湘大 XTU OJ 1097 排序 题解:c++ 函数库的使用 快速排序 归并排序 冒泡排序

一、链接 1097 排序 二、题目 Description N个整数&#xff0c;将其排序输出。 输入 第一行是一个整数K&#xff08;1<K<20&#xff09;&#xff0c;表示有多少个样例&#xff0c;每个样例的第一行是一个整数N&#xff08;1<N<1,000&#xff09;和一个字符X&…...

Stable Diffusion AI绘图教学

课程介绍下载 这门课程将教授学生使用Stable Diffusion AI绘图工具进行数据可视化和图形设计。学生将学习基本的绘图原理、数据分析技巧&#xff0c;以及如何使用Stable Diffusion AI创建高质量的图表和可视化作品。通过实践项目和案例研究&#xff0c;学生将提升绘图技能&…...

39、传输层的任务和协议

从本节内容开始&#xff0c;我们学习TCP/IP模型的传输层的知识。传输层是TCP/IP模型中的重要组成部分&#xff0c;如果没有传输层的处理&#xff0c;那么源主机发送的IP数据包到达目的主机之后&#xff0c;目的主机将不知道这个数据是哪个应用程序的数据&#xff0c;就不能很好…...

系统架构设计专业技能 · 网络规划与设计(三)【系统架构设计师】

系列文章目录 系统架构设计专业技能 网络规划与设计&#xff08;三&#xff09;【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计&#xff08;四&#xff09;【系统架构设计师】 系统架构设计高级技能 软件架构设计&#xff08;一&#xff09;【系统架构设计师…...

使用Matplotlib判断鼠标是否点击在当前线上的详细指南

系列文章目录 文章目录 系列文章目录前言一、导入必要的库二、创建图表和线条三、定义鼠标点击事件处理函数四、显示图表总结前言 Matplotlib是一个强大的绘图库,用于在Python中创建各种类型的图表和可视化。本文将详细介绍如何使用Matplotlib来判断鼠标是否点击在当前线上,…...

http get、post、put

HTTP协议定义了多种请求方法,用于不同的操作。最常见的有 GET、POST 和 PUT。 GET:GET 是最常用的方法,通常用于请求服务器发送某个资源。GET 请求只通过 URL 传送数据,数据信息会附在 URL 之后,以参数的形式附加。由于这种传送方式的限制,GET 请求的数据量较小,且安全性…...

JavaSec-RCE

简介 RCE(Remote Code Execution)&#xff0c;可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景&#xff1a;Groovy代码注入 Groovy是一种基于JVM的动态语言&#xff0c;语法简洁&#xff0c;支持闭包、动态类型和Java互操作性&#xff0c…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

【VLNs篇】07:NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

解决:Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...