vue父組件向子組件傳遞數值 props

vue 組件操作避免不了傳值的問題，傳值如何操作，項目中筆記記錄點滴

項目原型創建繪圖組件，實現組件隨處引入，這就涉及到，值也是可變的，所以需要父類傳值。

• 1.在父組件中將值設置

• 2.傳遞值

• 3.在子組件中使用props接受父組件傳遞的值

記錄一下自己的開發，也希望給到剛剛學習的人一些幫助，下面貼上代碼

• 父組件

<template>
    <div>
        <el-row :gutter="20">
            <el-col>
                <Schart :polar="polar"></Schart>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Schart from './chart/Line';
    export default {
        name: 'dashboard',
        data() {
            let datas = []

            for (let i = 0; i <= 360; i++) {
                let t = i / 180 * Math.PI
                let r = Math.sin(2 * t) * Math.cos(2 * t)
                datas.push([r, i])
            }

            return {
                polar: {
                    title: {
                        text: '極坐標雙數值軸'
                    },
                    legend: {
                        data: ['line']
                    },
                    polar: {
                        center: ['50%', '54%']
                    },
                    tooltip: {
                        trigger: 'item',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                    angleAxis: {
                        type: 'value',
                        startAngle: 0
                    },
                    radiusAxis: {
                        min: 0
                    },
                    series: [
                        {
                            coordinateSystem: 'polar',
                            name: 'line',
                            type: 'line',
                            showSymbol: false,
                            data: datas
                        }
                    ],
                    animationDuration: 2000
                },
            }
        },
        components: {
            Schart
        },
   
    }
</script>

• 2.子組件

<template>
    <v-chart :options="polar"/>
</template>
<script>
    import ECharts from 'vue-echarts'
    import 'echarts/lib/chart/line'
    import 'echarts/lib/component/polar'

export default {
    name:'Line',
    data() {

    },
    props:{
        polar: {
            type:Array,
            required:true
        }
    },
    components: {
        'v-chart': ECharts
    },
}
</script>