时间戳

首页 > 解决方案 > [Vue 警告]：属性或方法“波士顿”未在实例上定义，但在渲染期间引用

vue.js - [Vue 警告]：属性或方法“波士顿”未在实例上定义，但在渲染期间引用

问题描述

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

组件 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 警告]：属性或方法“波士顿”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：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" />，它会显示！到底是怎么回事？

标签： vue.jsvuejs2vue-component

解决方案

如果您使用的是内联字符串，则应跳过:或引用您的字符串。

:是简写形式，v-bind预计将与您在将属性从父组件传递给子组件时绑定的变量一起使用。在这种情况下，您没有Boston在父上下文中调用变量，因此来自 Vue.js 的错误。

如果您只想使用一个常量字符串Boston，就像使用它一样
<WorkstationView :workstation="1.1" :agency="'Boston'" />

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

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

推荐阅读