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文件夹,新建myMixins.js2、myMixins.js 文件3、index.vue 文件(要使用的文件) mixins 总结二、composable(组合式api composition )1、 新建composables文件夹,新建useEdit.js2、useEdit.js…...
通过OpenTelemetry上报Python-flask应用数据(阿里云)
参考文档 https://help.aliyun.com/document_detail/611711.html?spma2c4g.90499.0.0.34a056ddTu2WWq 先按照 方法一:手动埋点上报Python应用数据 步骤测试上报是否正常。 flas 上报 在 手动埋点上报Python应用数据 的基础上,上报flask应用的数据&#…...
使用node搭建服务器,前端自己写接口,将vue或react打包后生成的dist目录在本地运行
使用node.jsexpress或者使用node.jspm2搭建服务器,将vue或react打包后生成的dist目录在本地运行 vue项目打包后生成的dist目录如果直接在本地打开index.html,在浏览器中会报错,无法运行起来。 通常我是放到后端搭建的服务上面去运行,当时前端…...
一篇文章搞懂如何使用JDBC操作数据库,还有JDBC进阶操作
目录 简介什么是JDBC如何使用JDBC1、获取连接2、操作数据3、关闭连接,释放资源使用技巧 查询操作创建表,插入模拟数据使用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
注:本文基于stm32使用FMC驱动SDRAM(IS42S32800G-6BLI)工程继续开发 本例使用安富莱的H743XIH板子驱动LTDC点亮7寸LCD 硬件接线: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物理系统的核心,提供了一套用于处理和控制物理模拟的API。这个类提供了用于控制物理系统的全局属性和方法,以及检测和施加力到游戏对象,处理碰撞和触发器事件等。为了让开发者都能更好理解这个Physics类&#x…...
数据结构与算法-数组(附阿里面试题)
一 面试经典: 给你一个文件里面包含全国人民(14亿)的年龄数据(0~180),现在要你统计每一个年龄 有多少人? 给定机器为 单台2CPU2G内存。不得使用现成的容器,比如map等。&am…...
k8s集群网络插件搭建——————解决集群notready(k8s1.20版本,docker24)
前面已经提到,在初始化 k8s-master 时并没有网络相关配置,所以无法跟 node 节点通信,因此状态都是“NotReady”。但是通过 kubeadm join 加入的 node 节点已经在k8s-master 上可以看到。 那么,这个时候我们该怎么办呢?…...
有血有肉的PPT
1、PPT是Powerpoint缩写 2、引申的含义是Powerpoint Power(力量/能量) Point(观点/要点) 3、用PPT做的文档是讲演稿,讲演的内容要有力度,之所以要去演讲是为了能够影响受众 4、其次演讲稿上的内容要列出要点、表明观点,所以一般P…...
使用C语言实现UDP消息接收
目录 简介:步骤:步骤 1: 创建套接字步骤 2: 接收消息步骤 3: 完成 函数及变量解释总结: 简介: 在网络通信中,UDP(User Datagram Protocol)是一种无连接协议,它提供了一种快速、高效的数据传输方法。本文将向您展示如何使用C语言编…...
图片加水印
基础 基于:https://github.com/chishaxie/BlindWaterMark#blindwatermark 前置 安装python,操作系统为ubuntu 18.04.4 server 说明:python2 不行,已验证不行的版本是2.7.17,建议使用ubuntu 18.04.4 server对应的py…...
Nginx代理接口访问返回404
Nginx代理接口访问返回404 一、背景 因为不同业务系统间有接口调用,存在跨域问题,为了解决同源策略,需要将接口通过nginx去转发,但是配置完后通过postman请求一直存在访问404的问题。 访问地址:https://a.test.com/n…...
湘大 XTU OJ 1097 排序 题解:c++ 函数库的使用 快速排序 归并排序 冒泡排序
一、链接 1097 排序 二、题目 Description N个整数,将其排序输出。 输入 第一行是一个整数K(1<K<20),表示有多少个样例,每个样例的第一行是一个整数N(1<N<1,000)和一个字符X&…...
Stable Diffusion AI绘图教学
课程介绍下载 这门课程将教授学生使用Stable Diffusion AI绘图工具进行数据可视化和图形设计。学生将学习基本的绘图原理、数据分析技巧,以及如何使用Stable Diffusion AI创建高质量的图表和可视化作品。通过实践项目和案例研究,学生将提升绘图技能&…...
39、传输层的任务和协议
从本节内容开始,我们学习TCP/IP模型的传输层的知识。传输层是TCP/IP模型中的重要组成部分,如果没有传输层的处理,那么源主机发送的IP数据包到达目的主机之后,目的主机将不知道这个数据是哪个应用程序的数据,就不能很好…...
系统架构设计专业技能 · 网络规划与设计(三)【系统架构设计师】
系列文章目录 系统架构设计专业技能 网络规划与设计(三)【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计(四)【系统架构设计师】 系统架构设计高级技能 软件架构设计(一)【系统架构设计师…...
使用Matplotlib判断鼠标是否点击在当前线上的详细指南
系列文章目录 文章目录 系列文章目录前言一、导入必要的库二、创建图表和线条三、定义鼠标点击事件处理函数四、显示图表总结前言 Matplotlib是一个强大的绘图库,用于在Python中创建各种类型的图表和可视化。本文将详细介绍如何使用Matplotlib来判断鼠标是否点击在当前线上,…...
http get、post、put
HTTP协议定义了多种请求方法,用于不同的操作。最常见的有 GET、POST 和 PUT。 GET:GET 是最常用的方法,通常用于请求服务器发送某个资源。GET 请求只通过 URL 传送数据,数据信息会附在 URL 之后,以参数的形式附加。由于这种传送方式的限制,GET 请求的数据量较小,且安全性…...
【Linux】shell脚本忽略错误继续执行
在 shell 脚本中,可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行,可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令,并忽略错误 rm somefile…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Android第十三次面试总结(四大 组件基础)
Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成,用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机: onCreate() 调用时机:Activity 首次创建时调用。…...
GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看
文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
区块链技术概述
区块链技术是一种去中心化、分布式账本技术,通过密码学、共识机制和智能合约等核心组件,实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点:数据存储在网络中的多个节点(计算机),而非…...
