我有这个简单的脚本,在里面我的道具来自其他组件,当我进行操作时,它的工作正常。但是,如何将prop传递给line-chart
组件呢?
export default {
props: ['dataset'],
components:{
'line-chart': {
extends: Bar,
beforeMount () {
try{
this.addPlugin(horizonalLinePlugin)
//console.log(this.$props);
console.log($this.$props.dataset); <- How can show it here?
}catch(err){
}
},
mounted () {
this.renderChart(chartOption, chartSettings
)
}
}
},
created(){
console.log(this.$props) <- Working fine
},
mounted(){
}
}
最佳答案
您不能直接从子组件访问父组件的props
;您需要在子组件中声明prop,然后将数据从父组件传递给它。
export default {
props: ['dataset'],
components:{
'line-chart': {
extends: Bar,
props: ['dataset'], // declare the prop
beforeMount () {
try {
this.addPlugin(horizonalLinePlugin)
console.log(this.dataset); // access with this.dataset
} catch(err) {
}
},
mounted () {
this.renderChart(chartOption, chartSettings)
}
}
}
然后在模板中,将
dataset
从父组件传递到子组件:<line-chart :dataset="dataset"></line-chart>