Question

我有这个简单的脚本，在内部我有来自其他组件的道具，当我对其进行操作时，它的工作正常。但是，如何在我的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(){

    }
  }

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

然后在模板中，将dataset从父组件传递到子组件：

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

Vue JS：在组件内部传递道具

1 个答案: