vue mixin混入与hook

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

vue2、vue3选项式API:

js 复制代码
// mixins/mixin.js
export const mixin = {
  methods: {
    courseType(courseLevel) {
      const levelMap = {
        1: '初级',
        2: '中级',
        3: '高级'
      };
      return levelMap[courseLevel] || '';
    }
  }
}
组件引入mixin
html 复制代码
<template>
  <view>
    <!-- 直接调用混入的 courseType 方法 -->
    <text>课程等级: {{ courseType(level) }}</text>
  </view>
</template>
js 复制代码
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‌ 替代混入

js 复制代码
// hooks/useCourseLevel.js
export function useCourseLevel() {
  const courseType = (courseLevel) => {
    const levelMap = {
      1: '初级',
      2: '中级',
      3: '高级'
    };
    return levelMap[courseLevel] || '';
  };
  return {
    courseType
  };
}
组件中使用
js 复制代码
<script setup>
import { useCourseLevel } from '@/hooks/useCourseLevel.js';

const { courseType } = useCourseLevel();
</script>

// html
<!-- 级别 -->
<view class="descript">{{ courseType(courseLevel) }}</view>
 
相关推荐
江城开朗的豌豆21 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆27 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
试图让你心动11 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_11 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏11 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
小毛驴85013 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
JSON_L16 小时前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊16 小时前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
奇舞精选17 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly
Britney⁺♛&?ꪶꪫꪜꫀ20 小时前
Vue2上
vue.js·npm