我有这个简单的脚本,里面有来自其他组件的 Prop ,当我安慰它时它工作正常。但是我怎样才能在我的 line-chart
组件下传递 prop 呢?
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)
}
}
}
然后在模板中,将数据集
从父组件传递到子组件:
<line-chart :dataset="dataset"></line-chart>
关于javascript - VueJS : Pass props inside component of component,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53423239/