uni-app vue3 封装 mixins options失败

uni-app vue3 封装 mixins options失败

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX
HBuilderX 3.2.14
第三方开发者工具 RC 1.05.2109131
基础库 2.21.0

操作步骤：

  • 自定义组件引用 mixins

预期结果：

  • mixins 正常引用

实际结果：

  • mixins 中options 引入失败

bug描述：

vue3 封装 mixins  

```javascript
export default {  
    // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性  
    options: {  
        virtualHost: true,  
    }  
}
```
```

更多关于uni-app vue3 封装 mixins options失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app vue3 封装 mixins options失败的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app Vue3 中，options 配置项在 mixins 中确实无法正常工作。这是因为 Vue3 的 Composition API 设计改变了 mixins 的合并策略，options 这类组件选项在 mixins 中不会被正确合并。

解决方案：

  1. 直接在每个组件中定义 options： 在每个需要 virtualHost: true 的组件中单独设置：

    export default {
  options: {
    virtualHost: true
  },
  // ...其他配置
}

  2. 使用组合式函数替代 mixins（推荐）： 创建 useVirtualHost.js：

    import { getCurrentInstance } from 'vue'

export function useVirtualHost() {
  const instance = getCurrentInstance()
  if (instance) {
    instance.type.options = {
      ...instance.type.options,
      virtualHost: true
    }
  }
}

    在组件中使用：

    import { useVirtualHost } from './useVirtualHost'

export default {
  setup() {
    useVirtualHost()
    // ...其他逻辑
  }
}

  3. 使用全局 mixin（谨慎使用）：

    // main.js
import { createApp } from 'vue'

const app = createApp(App)
app.mixin({
  options: {
    virtualHost: true
  }
})
回到顶部