Vue 道具默认值无法正常工作

Question

好的，所以我有以下从父组件获得的道具

 props: {
  selectedExchange: {
    default: 'acx',
  }
},

我尝试用下面的方法来使用它

 methods: {
  getMarkets() {
    const ccxt = require('ccxt')
    const exchanges = ccxt.exchanges;
    let marketPair = new ccxt[this.selectedExchange]()
    let markets =  marketPair.load_markets()
    return markets
  }
},

预期结果应该是我的项目的一系列市场，但我在控制台中收到错误消息

 [Vue warn]: Error in mounted hook: "TypeError: ccxt[this.selectedExchange] is not a constructor"

现在我认为这可能是 ccxt 的问题，但事实并非如此！我试过下面的代码

methods: {
  getMarkets() {
    const ccxt = require('ccxt')
    const exchanges = ccxt.exchanges;
    let acx = 'acx'
    let marketPair = new ccxt[acx]()
    let markets =  marketPair.load_markets()
    return markets
  }
},

如果你没有看到变化，我做了一个包含 'acx' 的变量，与 prop 完全一样，但这次它是在方法内部创建的，使用这段代码我得到了预期的结果结果，这几天一直困扰我，我似乎找不到答案，我是否初始化了错误的默认值？当我查看 vue 开发工具时，我的道具的值是 array[0]，只有在我将值传递给该道具后它才会更新，我不应该在 devtools 中看到默认值 acx 吗？非常感谢任何帮助！

编辑 1：添加父组件代码

这就是我如何使用父级内部的方法以及我的组件如何相互关联，

<div id="exchange">
  <exchange v-on:returnExchange="updateExchange($event)"></exchange>
</div>
<div id="pair">
  <pair :selectedExchange="this.selectedExchange"></pair>
</div>

这是脚本标签中的代码，我没有包含 import 标签，因为我认为它不会有用

export default {
  name: 'App',
  components: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: ''
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

Answer 1

在这种情况下，您将继承默认值：

<pair></pair>

在这种情况下，您将始终继承 selectedExchange 的值，即使它为 null 或未定义：

<pair :selectedExchange="this.selectedExchange"></pair>

因此，在您的情况下，您必须处理父组件的默认值。

这应该有效：

export default {
  name: 'App',
  components: { exchange, pair, trades },
  data(){
    return{
      selectedExchange: 'acx' // default value
    }
   },
   methods: {
     updateExchange(updatedExchange){
       this.selectedExchange = updatedExchange
     }
   },
  };

Vue 道具默认值无法正常工作

Vue prop default value not working properly

javascript

vue.js

ccxt

编辑 1：添加父组件代码