javascript - VueJS : Pass props inside component of component

Question

我有这个简单的脚本，里面有来自其他组件的 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(){

    }
  }

Answer 1

子组件无法直接访问父组件的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>