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>