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>