Question

我正在设置一些道具，如下所示。

组件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" />）使用一个数字值，它将显示！发生了什么事？

Answer 1

:agency1="Boston"是v-bind:agency1="Boston"的{{3}}。它尝试绑定名为Boston的数据属性，但是您没有定义一个。 :agency1="3"之所以有效，是因为3是一个文字。如果您试图将文字字符串“ Boston”分配给agency1，请不要使用前面的冒号：

<!--
<WorkStationView :agency1="Boston">
--> <!-- DON'T DO THIS -->

<WorkStationView agency1="Boston">

Answer 2

如果您使用内联字符串，则应跳过:或用引号引起来。

:是v-bind的缩写，在将属性从父组件传递给子组件时，应与要绑定的变量一起使用。在这种情况下，您在父上下文中没有名为Boston的变量，因此来自Vue的错误。

如果您只想使用Boston之类的常量字符串，就可以像
<WorkstationView :workstation="1.1" :agency="'Boston'" />

或者，如果您执行以下操作，它也将起作用：

<WorkstationView :workstation="1.1" agency="Boston" />

[Vue警告]：属性或方法“ Boston”未在实例上定义，但在渲染期间被引用

2 个答案: