将值动态绑定到组件的道具答案

【问题标题】：Bind dynamically value to component's props将值动态绑定到组件的道具
【发布时间】：2018-08-03 20:49:55
【问题描述】：

我已经用 props 定义了自定义组件。当我使用这个组件时，我需要将值动态绑定到这些道具中

在自定义组件的模板中，我定义了这样的元素：

<template>
...
    <div class="input-group-addon" v-show="currency">{{ currency }}</div>
...
</template>

及其道具：

export default {
   ...
    props: {
      currency: {
        type: String
      }
    }
   ...
}

以及组件在另一个组件中的使用：

组件的模板

<custom-component currency="calculateCurrency" ></custom-component>

组件的代码

export default {
   components: {custom-component},
   data: () => ({
      myProject: null // this is used as v-model in combo box
   }),
   computed: {
      calculateCurrency: function() {
          return myProject.currency; // currency is getter in object myProject
      }
   }
}

所以结果我有这样的东西：

我也试过用

suffix=calculateCurrency

没有引号但没有帮助。你能帮我修一下吗？谢谢

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

我相信您在绑定属性上缺少一个冒号：

<custom-component :currency="calculateCurrency" ></custom-component>

在“货币”之前添加将允许数据绑定

【讨论】：