当前位置：首页 > VUE

vue TS 实现mixin

2026-03-29 23:53:25VUE

在 Vue 3 和 TypeScript 中实现 Mixin

Vue 3 的 Composition API 提供了更灵活的方式复用逻辑，但 Mixin 仍然可以用于选项式 API 或与 Composition API 结合使用。以下是具体实现方法：

定义 TypeScript Mixin

创建 mixin 文件时需使用 TypeScript 的接口定义类型：

// myMixin.ts
import { ComponentOptions } from 'vue'

// 定义 mixin 数据类型
interface MyMixinData {
  mixinValue: string
  mixinMethod(): void
}

export const myMixin: ComponentOptions = {
  data(): MyMixinData {
    return {
      mixinValue: 'Hello from Mixin'
    }
  },
  methods: {
    mixinMethod(): void {
      console.log(this.mixinValue)
    }
  }
}

在组件中使用 Mixin

// MyComponent.vue
<script lang="ts">
import { defineComponent } from 'vue'
import { myMixin } from './myMixin'

export default defineComponent({
  mixins: [myMixin],
  mounted() {
    this.mixinMethod() // 调用 mixin 方法
    console.log(this.mixinValue) // 访问 mixin 数据
  }
})
</script>

类型合并处理

当 mixin 与组件自身选项存在类型冲突时，需要扩展类型定义：

// 扩展组件类型声明
declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
    mixinValue?: string
    mixinMethod?(): void
  }
}

使用 Composition API 替代方案

Vue 3 推荐使用 composable 函数替代 mixin：

// useMixin.ts
import { ref } from 'vue'

export function useMixin() {
  const mixinValue = ref('Hello from Composable')

  function mixinMethod() {
    console.log(mixinValue.value)
  }

  return { mixinValue, mixinMethod }
}

// MyComponent.vue
<script lang="ts">
import { defineComponent } from 'vue'
import { useMixin } from './useMixin'

export default defineComponent({
  setup() {
    const { mixinValue, mixinMethod } = useMixin()

    return { mixinValue, mixinMethod }
  }
})
</script>