uni-app [Bug report] 支付宝小程序中 vue 组件不支持 mixins 带 props 的对象

rqqzpn5f  于 2021-11-27  发布在  Java
关注(0)|答案(4)|浏览(777)

问题描述

支付宝小程序中 vue 组件不支持 mixins 带 props 的对象

复现步骤

组件 test.vue

<template>
  <div>测试</div>
</template>

<script>
export default {
mixins: [{ props: { test: String } }]
}
</script>

页面 page.vue

<template>
  <div>
    <test />
  </div>
</template>

<script>
import test from './test'
export default {
components: {
test
}
}
</script>

预期结果

支付宝小程序中 vue 组件能支持 mixins 带 props 的对象。

实际结果

报错了,如图所示

Error: Tried to merge two objects with the same key: `test`. This conflict is due to `props` of a component mixin.
    at $getComponentClass (index.axml:12)
    at Object../packages/dashboard/index.axml (index.axml:14)
    at __webpack_require__ (bootstrap:19)
    at render (index.axml:35)

系统信息:

uni-app v2.8.1
uni-app cli v2.0.0-alpha-28120200721001

Environment Info:

  System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 84.0.4147.89
    Firefox: Not Found
    Safari: 13.0.5
  npmPackages:
    @dcloudio/types: ^1.1.0 => 1.1.0 
    @dcloudio/uni-app-plus: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-app-plus-nvue:  0.0.1 
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1 
    @dcloudio/uni-automator: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-cli-shared: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-h5: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-helper-json: * => 1.0.5 
    @dcloudio/uni-migration: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-mp-alipay: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-mp-baidu: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-mp-qq: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-mp-toutiao: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/uni-mp-weixin: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-quickapp-native: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-quickapp-webview: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/uni-stat: ^2.0.0-v3-24020191018001 => 2.0.0-v3-24020191018001 
    @dcloudio/uni-template-compiler: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/vue-cli-plugin-uni: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-alpha-28120200720003 => 2.0.0-alpha-28120200720003 
    @dcloudio/webpack-uni-mp-loader: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @dcloudio/webpack-uni-nvue-loader:  0.0.1 
    @dcloudio/webpack-uni-pages-loader: ^2.0.0-alpha-28120200721001 => 2.0.0-alpha-28120200721001 
    @hap-toolkit/dsl-vue:  0.6.13 
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.1.2 
    @vue/babel-preset-app:  4.3.1 
    @vue/babel-preset-jsx:  1.1.2 
    @vue/babel-sugar-functional-vue:  1.1.2 
    @vue/babel-sugar-inject-h:  1.1.2 
    @vue/babel-sugar-v-model:  1.1.2 
    @vue/babel-sugar-v-on:  1.1.2 
    @vue/cli-overlay:  4.3.1 
    @vue/cli-plugin-babel: ~4.3.0 => 4.3.1 
    @vue/cli-plugin-router:  4.3.1 
    @vue/cli-plugin-vuex:  4.3.1 
    @vue/cli-service: ~4.3.0 => 4.3.1 
    @vue/cli-shared-utils:  4.3.1 
    @vue/component-compiler-utils:  3.1.2 (3.1.2)
    @vue/preload-webpack-plugin:  1.1.1 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^6.2.2 => 6.2.2 
    mpvue-page-factory:  1.0.1 
    mpvue-template-compiler:  1.0.13 
    uni-h5-vue:  2.6.10 
    uni-mp-vue:  2.6.10 
    vue: ^2.6.11 => 2.6.11 
    vue-eslint-parser:  7.1.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.2 (15.9.2)
    vue-router:  3.0.1 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.6.11 => 2.6.11 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.5.1 => 3.5.1 
  npmGlobalPackages:
    @vue/cli: 4.3.1
dsekswqp

dsekswqp1#

你好 我也遇到同样的问题 请问你是怎么解决的?

gg0vcinb

gg0vcinb2#

@chocolateonly

我只能把 props 从对象里抽离出来

import mixinA from '@/mixins/mixinA'
import mixinB from '@/mixins/mixinB'

const mixins = [mixinA, mixinB]

export default {
  // #ifdef MP-ALIPAY
  mixins: mixins.map(item => ({ ...item, props: {} })),
  // #endif
  // #ifndef MP-ALIPAY
  mixins: mixins,
  // #endif
  props: {
    // #ifdef MP-ALIPAY
    ...mixins.reduce((prev, curr) => ({ ...prev, ...(curr.props || {}) }), {}),
    // #endif
    aaa: String
  },
  ...
}
ymzxtsji

ymzxtsji3#

@auven perfect! thank you very much!

相关问题