Vue在绑定组件中显示道具

Posted 2023-02-23

【中文标题】Vue在绑定组件中显示道具

【英文标题】：Vue show props in bind component

【发布时间】：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 "

【参考方案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就够了。