Vue3+vue-chartjs：子组件mounted中如何使用父组件Props

核心错误点 #

1. 子组件访问Props必须用this：Vue组件的方法（比如mounted）里，要通过this.options访问传递过来的Props，直接写options会被当作局部变量，自然找不到。
2. 父组件传值错误：你用:options="A"是在传递变量A，但父组件里根本没定义这个变量。如果要传字符串"A"，要么去掉v-bind写成options="A"，要么用引号包裹:options="'A'"。
3. 变量作用域问题：子组件里if/else块里声明的response是局部变量，外面的this.data = response.data会拿不到值，得把response提到块外面声明。
4. 父组件多余的Props：父组件这里是作为提供者传递Props给子组件，自己不需要声明props: ['options']，删掉就行。

修正后的父组件代码 #

<template>
    <div>
        <div class="container">
            <h1 class="display-4 mb-5">Home</h1>
            <div>
                <!-- 静态传字符串，不用v-bind -->
                <PieComponent options="A" />
            </div>
            <div>
                <!-- 或者用v-bind传字符串，注意引号包裹 -->
                <PieComponent :options="'B'" />
            </div>
        </div>
    </div>
</template>

<script>
import PieComponent from './PieComponent.vue'

export default {
    components: { PieComponent }
    // 删掉多余的props声明
}
</script>

修正后的子组件代码 #

<template>
    <Pie v-if="loaded" :options="options" :data="data" />
</template>

<script>
import { Chart as ChartJS, ArcElement, Tooltip, Legend, Colors} from 'chart.js'
import { Pie } from 'vue-chartjs'
import externalDataService from '../services/externalDataService'

ChartJS.register(ArcElement, Tooltip, Legend, Colors)

export default {
    name: 'PieComponent',
    components: {
        Pie
    },
    props: ['options'],
    data: () => ({
        loaded: false,
        data: null
    }),
    async mounted() {
        try {
            let response; // 把response提到外面，扩大作用域
            // 用this.options访问Props
            if (this.options === "A") {
                response = await externalDataService.getA();
            } else {
                response = await externalDataService.getB();
            }
            this.data = response.data;
            this.loaded = true;
        } catch (error) {
            console.error(error);
        }
    }
}
</script>

额外建议 #

• Props最好加上类型校验，避免传错值，比如：

  props: {
      options: {
          type: String,
          required: true,
          validator: val => ['A', 'B'].includes(val) // 限制只能传A或B
      }
  }
  

• 如果后续要根据Props变化重新加载数据，可以监听Props的变化：

  watch: {
      async options(newVal) {
          this.loaded = false;
          try {
              const response = newVal === 'A' ? await externalDataService.getA() : await externalDataService.getB();
              this.data = response.data;
              this.loaded = true;
          } catch (error) {
              console.error(error);
          }
      }
  }
  

内容的提问来源于stack exchange，提问作者Francois