基于vue的动态组件配置系统设计一：vue的动态组件的妙用

整体效果

勉强到github下载到本地看效果吧，之后我在看看怎么到处gif链接

github

本文概要

1. 什么是动态组件
2. 循环动态组件—动态组件数组
3. props属性传递

什么是vue的动态组件

先看看官网对动态组件的解释。大致意思如下：

    // 编译前
    <component v-bind:is="currentView"></component>
    
    //js

    data(){
        return {
            currentView:'home'
        }
    }

    // 编译后

    <home></home>

动态组件主要靠v-bind:is来确定编译后是那个组件，其中currentView可以动态改变，编译的组件也就跟着改变。

循环动态组件—动态组件数组

有了这个前提，再加上vue有一个神器：v-for，那是不是可以循环一大堆动态组件出来，让它自动变成我们想要的组件集合（即viewList）

所以我们可以定义一个这样的组件集合以及循环,比如在app.vue

    //app.vue
    <template>
        <component v-for="(view,index) in viewList" :key="index" v-bind:is="view"></component>
    </template>
    <script>
    export default {
    data(){
        return{
            viewList:[
                { name:'home' },
                { name:'about'}
                ...
            ]
        }
    }

    }

    </script>

编译后

    <home></home>
    <about></about>

那么，我们就知道，接下来只要操作好数组viewList的元素就好了！！第一阶段完成！

props属性传递

说了是动态组件配置系统，现在只能是组件任意的添加删除，但是每个组件都有不同的属性，既有不同的props或data，比如
<home :text="home"></home>
<about :title="about"></about>
home和about有不相同的两个属性text、title，日常写法如上，那怎么样才能做到在动态组件里面配置相对应的属性呢。

这里就是对组件的统一规范设计了：
比如,要满足上面的home组件传入text,about组件传入的title,

//home.vue  
    <template>
        <div>{{props.text}}</div>
    </template>
    <script>
    export default{
        props:{
            props:{}
        }
    }
    </script>

//about.vue 
    <template>
        <div>{{props.title}}</div>
    </template>
    <script>
    export default{
        props:{
            props:{}
        }
    }
    </script>

//app.vue
    
    <template>
        <div>
        <component v-for="(view,index) in viewList" :props="view.props" :key="index" v-bind:is="view"></component>
    </div>
    </template>
    <script>
    export default{
    data(){
        return{
            viewList:[
                { name:'home',props:{ text:'home' } },
                { name:'about',props:{ title:'about'}}
                ...
            ]
        }
    }
    }
    </script>

大概的意思就是：所有的子组件（home和about），都统一定义一个props，这里命名这个props为同名props，容易混淆的同学你可以当它是aprops，然后每个子组件各自的属性，就由aprops这个对象来承担，比如props:{ text:'home' },props:{ text:'home' }；在母模版（app.vue）里统一通过:props='props'来传入，这样不同属性的问题就解决了！！

ok,以上就是整个动态原理的介绍啦，下一篇会正式介绍动态组件配置系统的设计思路与实现的，mark