[英]VueJS - unable to pass props from parent to child component
This is my parent:这是我的父母:
<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>
This is my child component:这是我的子组件:
<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>
I am able to pass the data with the props, but not the type.我可以使用道具传递数据,但不能传递类型。 When I change
type: this.type
to type: "bar"
it works as expected, so there is no error in the Code itself.当我将
type: this.type
更改为type: "bar"
时,它按预期工作,因此代码本身没有错误。
I get the following warning:我收到以下警告:
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.
What am I doing wrong?我究竟做错了什么?
You are trying to dynamically bind
the prop
"type" to bar as if the last is a variable.您正在尝试将
prop
“类型”动态bind
到bar ,就好像最后一个是变量一样。 If you want to pass it as a String do this:如果您想将其作为字符串传递,请执行以下操作:
<Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
You use:type="bar" so Vue looking for a variable o getter that is called "bar".您使用:type="bar",因此 Vue 寻找一个名为“bar”的变量 o getter。 If you want to pass the value as string you should remove ":" before "type".
如果你想将值作为字符串传递,你应该在“type”之前删除“:”。
<template>
<Chart type="bar" :data="[2,15,3,4,5,1,2,4,10,11]"></Chart>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.