Vue在绑定组件中显示道具答案

【问题标题】：Vue show props in bind componentVue在绑定组件中显示道具
【发布时间】：2021-05-18 23:39:56
【问题描述】：

孩子

    Vue.component('xms',{
      template : `<div> {{errorMsg}} </div>`,
      props : {
       errorMsg : '',
       minLength : '',
      }
     }
    )

父 html

<xms errorMsg="Error min : {{minLength}} " minLength="5"><xms>

我想要输出

" 最小误差：5 "

【问题讨论】：

标签： vue.js vue-component vue-props

【解决方案1】：

你应该在父组件而不是父模板中定义 minLength 在父组件中：

data: {
minLength: 5,
}

对我来说，我只是将最小长度传递给子组件，然后我们可以添加一条消息在子组件中：

props: [minLength],
data: {
errMessage: 'Error ' + this.minLength
}

【讨论】：

【解决方案2】：

首先更正你的定义：

 Vue.component('xms',{
  template : `<div> {{errorMsg}} </div>`,
  props : {
   errorMsg : String,
   minLength : Number,
  }
 }
)

然后修复动态绑定：

<xms :errorMsg="'Error min : ' + 5" :minLength="5"><xms>

【讨论】：

我建议将{{ minLength }} 放在{{ errorMsg }} 旁边的模板中，并在没有v-bind 冒号的情况下使用<xms errorMsg="Error min:" minLength="5"><xms>。
它在目标上。在我看来，不需要传minLength，只要errMsg就够了。