VueJS - 无法将道具从父组件传递给子组件答案

【问题标题】：VueJS - unable to pass props from parent to child componentVueJS - 无法将道具从父组件传递给子组件
【发布时间】：2020-11-23 07:34:25
【问题描述】：

这是我的父母：

<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.

我做错了什么？

【问题讨论】：

标签： javascript vue.js vue-props

【解决方案1】：

你使用 :type="bar" 所以 Vue 寻找一个叫做 "bar" 的变量 o getter。如果你想将值作为字符串传递，你应该在“type”之前删除“:”。

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

【讨论】：

【解决方案2】：

您正在尝试动态地将bind prop“类型”为 bar，就好像最后一个是变量一样。如果您想将其作为字符串传递，请执行以下操作：

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

【讨论】：

谢谢你，有趣的是，有时你不得不承认你必须学习一些基础知识 ;-)
@DataMastery 欢迎您。请将答案标记为关闭问题的解决方案。