Vue.js 属性或方法未在实例上定义，但在渲染期间被引用。确保此属性是反应性vue js

我试图通过道具将数据从Vue.js中的一个组件传递到另一个组件，但这不起作用，当我打开控制台时，会出现以下错误：

 Property or method "heading" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

为什么以及如何正确传递数据

下面是我的子组件的html：

<template>
  <div class="balance-card-container">
          <h2 class="users">{{heading}}</h2>
    <div class="s">
      <md-card class="balance-card">
        <md-card-header>
          <div class="md-title title">{{ title }}</div>
        </md-card-header>
        <md-card-content>
          <p class="number-p">2345</p>
        </md-card-content>
      </md-card>
      
      <md-card class="second-card">
              <div class="chart-wrapper">
                <chart :options="chartOptionsLine"></chart>
              </div>
      </md-card>
    </div>
  </div>
</template>

export default {
  name: "BalanceCard",
  props: ["title, heading"],

<div class="charts-container">
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
    </div>

{{heading}}
{{title}}
2345
导出默认值{
名称：“余额卡”，
道具：[“标题，标题”]，

和我的父组件：

<template>
  <div class="balance-card-container">
          <h2 class="users">{{heading}}</h2>
    <div class="s">
      <md-card class="balance-card">
        <md-card-header>
          <div class="md-title title">{{ title }}</div>
        </md-card-header>
        <md-card-content>
          <p class="number-p">2345</p>
        </md-card-content>
      </md-card>
      
      <md-card class="second-card">
              <div class="chart-wrapper">
                <chart :options="chartOptionsLine"></chart>
              </div>
      </md-card>
    </div>
  </div>
</template>

export default {
  name: "BalanceCard",
  props: ["title, heading"],

<div class="charts-container">
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
    </div>

---

您应该从父组件传递

标题

道具：

<template>
  <div class="balance-card-container">
          <h2 class="users">{{heading}}</h2>
    <div class="s">
      <md-card class="balance-card">
        <md-card-header>
          <div class="md-title title">{{ title }}</div>
        </md-card-header>
        <md-card-content>
          <p class="number-p">2345</p>
        </md-card-content>
      </md-card>
      
      <md-card class="second-card">
              <div class="chart-wrapper">
                <chart :options="chartOptionsLine"></chart>
              </div>
      </md-card>
    </div>
  </div>
</template>

export default {
  name: "BalanceCard",
  props: ["title, heading"],

<div class="charts-container">
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
      <BalanceCard title="Total" heading="my-heading"/>
    </div>

这就是我正在做的事情，我正在得到这些错误确保您正确定义了道具。编写

道具：[“标题”，“标题”]

而不是

道具：[“标题，标题”]