vue mixin混入与hook

mixin混入是 ‌选项式 API‌,在vue3-Composition API <script setup> 中无法直接使用,需通过 setup() 函数转换

vue2、vue3选项式API:

// mixins/mixin.js
export const mixin = {methods: {courseType(courseLevel) {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';}}
}
组件引入mixin
<template><view><!-- 直接调用混入的 courseType 方法 --><text>课程等级: {{ courseType(level) }}</text></view>
</template>
import { mixin } from '@/mixins/mixin.js';
export default {mixins: [mixin],mounted() {console.log(this.courseType(2)); // 输出 "中级"}
}
在vue3-Composition API 组件(<script setup>)‌无法直接使用,需通过 setup() 函数转换:

在这里插入图片描述

vue3-Composition API 推荐使用 ‌自定义 Hook‌ 替代混入

// hooks/useCourseLevel.js
export function useCourseLevel() {const courseType = (courseLevel) => {const levelMap = {1: '初级',2: '中级',3: '高级'};return levelMap[courseLevel] || '';};return {courseType};
}
组件中使用
<script setup>
import { useCourseLevel } from '@/hooks/useCourseLevel.js';const { courseType } = useCourseLevel();
</script>// html
<!-- 级别 -->
<view class="descript">{{ courseType(courseLevel) }}</view>

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

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

相关文章

Excel如何安装使用EPM插件并且汉化?

Excel如何使用EPM插件 Excel如何使用EPM插件一、安装EPM插件二、启动EPM插件三、插件汉化设置 Excel如何使用EPM插件 一、安装EPM插件 在安装EPM插件时&#xff0c;若运行安装包后出现报错提示&#xff0c;通常是因为系统缺少 Visual Studio 2010 组件&#xff0c;需先安装该…

vue3-springboot-mysql的docker部署

Docker配置原理与部署文档 概述 本文档详细说明RuoYi-Vue与BladeX集成项目的Docker部署原理&#xff0c;包括配置文件的作用、相互关系及数据流动。通过三个核心配置文件&#xff08;docker-compose.yml、Dockerfile和docker-entrypoint.sh&#xff09;&#xff0c;实现了应用…

第十二天 使用Unity Test Framework进行自动化测试 性能优化:Profiler分析、内存管理

前言 在完成游戏核心功能开发后,如何确保项目质量并成功发布到各大平台?本文将从自动化测试到商店上架,手把手教你构建完整的游戏开发闭环。使用Unity 2022 LTS版本进行演示,所有代码均经过实际项目验证。 一、自动化测试实战(Unity Test Framework) 1.1 测试框架搭建 …

【专题四】前缀和(3)

&#x1f4dd;前言说明&#xff1a; 本专栏主要记录本人的基础算法学习以及LeetCode刷题记录&#xff0c;按专题划分每题主要记录&#xff1a;&#xff08;1&#xff09;本人解法 本人屎山代码&#xff1b;&#xff08;2&#xff09;优质解法 优质代码&#xff1b;&#xff…

深度解析:TextRenderManager——Cocos Creator艺术字体渲染核心类

一、类概述 TextRenderManager 是 Cocos Creator 中实现动态艺术字体渲染的核心单例类。它通过整合资源加载、缓存管理、异步队列和自动布局等功能&#xff0c;支持普通字符模式和图集模式两种渲染方案&#xff0c;适用于游戏中的动态文本&#xff08;如聊天内容、排行榜&…

【漫话机器学习系列】229.特征缩放对梯度下降的影响(The Effect Of Feature Scaling Gradient Descent)

特征缩放对梯度下降的影响&#xff1a;为什么特征标准化如此重要&#xff1f; 在机器学习和深度学习中&#xff0c;梯度下降是最常用的优化算法之一。然而&#xff0c;很多人在训练模型时会遇到收敛速度慢、训练不稳定的问题&#xff0c;其中一个重要原因就是特征未进行适当的…

【神经网络与深度学习】批标准化(Batch Normalization)和层标准化(Layer Normalization)

引言 在深度学习中&#xff0c;标准化技术&#xff08;Normalization&#xff09;是提高神经网络训练效率和性能的重要工具。其中&#xff0c;批标准化&#xff08;Batch Normalization, BN&#xff09;和层标准化&#xff08;Layer Normalization, LN&#xff09;是两种常用的…

OpenHarmony之电源管理子系统公共事件定义

OpenHarmony之电源管理子系统公共事件定义 电源管理子系统面向应用发布如下系统公共事件&#xff0c;应用如需订阅系统公共事件&#xff0c;请参考公共事件接口文档。 COMMON_EVENT_BATTERY_CHANGED 表示电池充电状态、电平和其他信息发生变化的公共事件的动作。 值&#x…

linux 环境下 c++ 程序打印 core dump 信息

linux 信号机制 软中断信号 Signal&#xff0c;简称信号&#xff0c;用来通知进程发生了异步事件&#xff0c;进程之间可以互相通过系统调用 kill 等函数来发送软中断信号。内核也可以因为内部事件而给进程发送信号&#xff0c;通知进程发生了某个事件。 进程对信号的处理 进…

Qt开发环境的安装与问题的解决(2)

文章目录 1. Qt开发环境安装的说明2. 通过安装包进行安装3. 通过在线下载程序 解决问题下载 https....网路错误问题解决开始安装--第一部分开始安装--第二部分 4. 建议配置环境变量&#xff08;非必须&#xff09;配置环境变量的意义 简介&#xff1a;这篇文章主要分享Qt开发环…

【每日EDA行业分析】2025年4月25日

深度总结&#xff1a;EDA 软件行业现状与发展趋势 一、引言 在半导体产业的复杂生态中&#xff0c;EDA 软件宛如一颗闪耀的明珠&#xff0c;它是集成电路设计的核心工具&#xff0c;贯穿芯片从设计构思到最终封装测试的全流程&#xff0c;其重要性不言而喻&#xff0c;被誉为…

flutter实践:比例对比线图实现

需求&#xff1a;flutter实现一个左右对比线图,带有动画效果 效果图&#xff1a; Widget _buildTop() {return Container(height: themeData.heightXl,padding: EdgeInsets.symmetric(horizontal: themeData.hSpacingMd),child: Row(mainAxisAlignment: MainAxisAlignment.spa…

测试基础笔记第十五天

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、集合1.集合的定义二、使用集合列表去重 导包二、函数1.函数介绍2.定义函数3.调用函数4.函数实现登录案例5.函数的返回值 三、模块和包1.模块的概念(Module)2.模…

Linux中的shell脚本练习

1.判断字符串是否为空 #!/usr/bin/bash while : #:默认值为真 do read -p "请输入你的密码: " a pass123456 if [ -z $a ];thenecho "您输入的密码不能为空"exit 1 elseif [ $a $pass ];thenecho "登录成功"breakelseecho "您的密码输入有…

使用命令关闭Redis服务端

使用命令关闭Redis服务端。 命令 redis-cli -a 111111 -p 6379 shutdown 有些人redis的端口不是6379&#xff0c;那就自己查一下 参数解释&#xff1a; -a&#xff1a;Redis密码 -p&#xff1a;Redis端口 shutdown&#xff1a;关闭命令

嵌入式RTOS实战:uC/OS-III最新版移植指南(附项目源码)

文章目录 前言一、uC/OS简介二、工程移植2.1 下载ucos源码2.2 创建空白工程2.3 拷贝ucosiii源码文件2.3.1 UC-CONFIG2.3.2 UC-CPU2.3.3 UC-LIB2.3.4 UC-OS3 2.3 添加工程文件分组及路径2.4 代码首次编译2.5 源码修改2.5.1 cpu_cfg.h2.5.2 os_cpu_c.c2.5.3 lib_cfg.h2.5.4 sys.h…

TypeScript中的函数类型定义与类型约束

函数类型定义与类型约束 一、核心概念&#xff1a;类型别名与函数类型 1. 类型别名&#xff08;Type Alias&#xff09; 定义 类型别名使用 type 关键字为现有类型创建一个新名称&#xff0c;可以用于&#xff1a; 基础类型&#xff08;如 string、number&#xff09;&…

相机DreamCamera2录像模式适配尺寸

在开发中遇到 一个问题&#xff0c;相机切换视频模式时&#xff0c;预览时&#xff0c;界面不能充满屏幕两侧有黑边&#xff0c;客户要求修改&#xff0c;在此记录 一问题现象&#xff1a; 系统相机在视频模式下预览时如下现象如图1&#xff0c;期望现象如图2: 图1 …

SpringCloud组件——Gateway

一.网关 1.问题提出 我们通过Eureka&#xff0c;Nacos解决了服务注册&#xff0c;服务发现的问题&#xff0c;使用SpringCloud LoadBalance解决了负载均衡的问题&#xff0c;使用OpenFeign解决了远程调用的问题。 但是当前所有微服务的接口都是直接对外暴露的&#xff0c;可…

C#中构造器及属性的加载顺序

一.基本原则: 先加载静态构造函数和静态字段,后加载普通构造函数和普通字段;先加载基类再加载子类; 二.具体的加载顺序: 父类静态字段--->父类静态构造函数--->子类静态字段--->子类静态构造函数--->父类实例字段---> 父类实例构造函数--->子类实例字段-…