Vue在绑定组件中显示道具

Question

子

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

父html

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

我想要输出

">错误最小值：5"；

Answer 1

首先更正您的定义：

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

然后修复动态绑定：

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

Answer 2

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

data: {
minLength: 5,
}

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

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