Vue JS: Pass props inside component of component

Question

I have this simple script, inside I have props came from other component, and its working fine when I consoled it. But how can I also pass the prop under my line-chart component?

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(){

    }
  }

Answer 1

You can't access parent component's props directly from child component; You need to declare the prop in the child component, and then pass data to it from parent component.

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)
      }
    }
  }

And then in your template, pass the dataset from parent component to child component:

<line-chart :dataset="dataset"></line-chart>