代码之家 › 专栏 › 技术社区 › Data Mastery

VueJS-无法将属性从父组件传递到子组件

vue-props vue.js javascript

1

Data Mastery · 技术社区 · 4 年前

<template>
    <Chart :type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>

<script>
import Chart from "./Chart"

    export default {
     components: {
        Chart
    },
  }

</script>

这是我的子组件:

<template>
    <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import {Chart} from 'highcharts-vue'

    export default {
      props: ["data", "type"],
      components: {
      highcharts: Chart 
    },
    data() {
      return {
        chartOptions: {
          chart: {
            type: this.type
          },
          series: [{
            data: this.data, // sample data
            name: "Test Series",
            color: "blue"
          }]
        }
      }
  }
  }
</script>

我可以用道具传递数据,但不能传递类型。当我改变 type: this.type 到 type: "bar"

我得到以下警告:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "bar" 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.

我做错什么了?

2 回复 | 直到 4 年前

1

3

Majed Badawi 4 年前

你试图动态地 bind 这个 prop “键入”到酒吧好像最后一个是变量。如果要将其作为字符串传递,请执行以下操作:

<Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>

2

1

Alessandro Filira 4 年前

<template>
    <Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>