vue中子组件的methods中获取到props中的值

父子组件通信

这个官网很清楚,也很简单,父组件中使用v-bind绑定传送,子组件使用props接收即可
例如:
父组件中

<template>
    <div>
        <head-top>head-top>
        <section class="data_section">
            <header class="chart-title">数据统计header>
            <el-row :gutter="20" class="chart-head">
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head blue-head">统计:div>el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售数量 <span>{{number}}span>div>el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">销售金额 <span>{{amount}}span>div>el-col>
                <el-col :xs="24" :sm="12" :md="6" :lg="6"><div class="grid-content data-head">利润统计 <span>{{profits}}span>div>el-col>
            el-row>
        section>
        <chart :chartData="chartData">chart>
    div>
template>

<script>
    data(){
            return {
                number: null,
                amount: null,
                profits: null,
                chartData: [10,10,10]
            }
        },
script>

子组件中

export default {
    props: ['chartData']
}

这种情况下,子组件的methods中想要取到props中的值,直接使用this.chartData即可
但是有写情况下,你的chartData里面的值并不是固定的,而是动态获取的,这种情况下,你会发现methods中是取不到你的chartData的,或者取到的一直是默认值

比如下面这个情况
父组件中


                    
                    

你可能感兴趣的:(vue,笔记,vue,父子组件通信)