编辑1：添加了父组件代码

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 dev工具内部时，我的prop的值为array[0]，只有在我将值传递给该prop以后，它才被更新，我是否不应该在devtools中看到acx的默认值？任何帮助深表感谢！

编辑1：添加了父组件代码

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

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

这是script标记中的代码，我没有包含import标记，因为我认为这不会有用

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

Answer 1

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

handleFormSubmit = (e) => {
        e.preventDefault();
        const {firstName, phoneNo} = this.state;
        localStorage.setItem('formData', JSON.stringify({ firstName, phoneNo })); // parse the data and save it.
        this.setState({
            firstName: '',
            phoneNo: '',
            showForm: true
        }); // Clear the form data
    }

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

<pair></pair>

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

这应该有效：

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

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

编辑1：添加了父组件代码

1 个答案: