我正在设置一些道具,如下所示。
组件1(父级):
<template>
<div>
<span>{{agency1}}</span>
<span>{{workstation}}</span>
</div>
</template>
<script>
export default {
name: "work-station-view",
props: {
agency1: {
type: String
},
workstation: {
type: Number
}
},
data() {
return {};
}
};
</script>
组件2(子级):
<template>
<WorkStationView :workstation="1.1" :agency1="Boston" />
</template>
workstation
道具可以很好地显示,但是agency1
道具根本不显示。我从控制台中的Vue收到此消息:
[Vue警告]:属性或方法“ Boston”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保在data选项中或对于基于类的组件,此属性都是反应性的。参见:https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties。
我检查了文档,并说要在data()
中对其进行定义,所以我将所有这些文档(可能更多)组合了起来,但无济于事:
// attempt 1
data() {
agency1 = this.agency1;
return {};
}
// attempt 2
data() {
return {
agency1 = this.agency1;
};
}
// attempt 3
data() {
return {
agency1: '';
};
}
如果我为agency1
(<WorkStationView :workstation="1.1" :agency1="3" />
)使用一个数字值,它将显示!发生了什么事?
答案 0 :(得分:2)
:agency1="Boston"
是v-bind:agency1="Boston"
的{{3}}。它尝试绑定名为Boston
的数据属性,但是您没有定义一个。 :agency1="3"
之所以有效,是因为3
是一个文字。如果您试图将文字字符串“ Boston”分配给agency1
,请不要使用前面的冒号:
<!--
<WorkStationView :agency1="Boston">
--> <!-- DON'T DO THIS -->
<WorkStationView agency1="Boston">
答案 1 :(得分:2)
如果您使用内联字符串,则应跳过:
或用引号引起来。
:
是v-bind
的缩写,在将属性从父组件传递给子组件时,应与要绑定的变量一起使用。在这种情况下,您在父上下文中没有名为Boston
的变量,因此来自Vue的错误。
如果您只想使用Boston
之类的常量字符串,就可以像
<WorkstationView :workstation="1.1" :agency="'Boston'" />
或者,如果您执行以下操作,它也将起作用:
<WorkstationView :workstation="1.1" agency="Boston" />