鍍金池/ 問答/HTML/ vue 單文件組件如何通過合并、繼承(extend)實(shí)現(xiàn)動(dòng)態(tài)組件?

vue 單文件組件如何通過合并、繼承(extend)實(shí)現(xiàn)動(dòng)態(tài)組件?

  1. 單文件組件通過import導(dǎo)入子組件A B C
  2. 子組件A B C 通過prop接收父組件傳遞過來的數(shù)據(jù)實(shí)現(xiàn)數(shù)據(jù)渲染

問題:
當(dāng)使用動(dòng)態(tài)組件 component is屬性來根據(jù)條件切換 A B C組件的顯示,在單文件組件中 import 的子組件該如何使用

導(dǎo)入的子組件能夠?qū)ψ咏M件進(jìn)行屬性的覆蓋生成新的組件么?類似于jquery的extend屬性,類似這種操作

錯(cuò)誤的操作

    import ChartLine from './component/line.index.vue';
    import ChartMap from './component/map.index.vue';
    import ChartBar from './component/bar.index.vue';
    import ChartPie from './component/pie.index.vue';
    export default {
        components: {
            ChartLine,
            ChartMap,
            ChartBar,
            ChartPie: [ // 將引入的ChartPie 和 父組件中data的屬性合并生成新的ChartPie,這樣就能夠在component動(dòng)態(tài)進(jìn)行切換并且渲染了
                ChartPie,
                {
                    props: {
                        id: 'pies1',
                        series: this.pies1.series
                    }
                }
            ]
        },
        data () {
            return {
                pies1: {
                    series: {
                        data:[
                            {value:535, name: '荊州'},
                            {value:510, name: '兗州'},
                            {value:634, name: '益州'},
                            {value:735, name: '西涼'}
                        ]
                    },
                    title: {
                    },
                    legend: {

                    }
                }
            };
        },

        
    }

相關(guān)的鏈接:
https://stackoverflow.com/que...

回答
編輯回答
挽歌
2018年7月2日 04:23
編輯回答
替身

用條件渲染啊

2017年12月1日 07:20