第二十九篇 动态组件 - component

        本篇内容讲述依然与组件内容相关，如先前的组件引入使用以及组件需要通信来工作的，那么本篇目讲的其实运用先前讲的知识点内容都可以来操作达到动态组件这样一个效果，如现在用这样的一个需求：如我的顶部导航栏中有首页、服务、关于，对应的相应的组件，那么通过点击导航栏的内容需要对页面内容进行一个切换；到此你就大致知道了其实就是不同组件之间进行动态的切换；

        先用先前内容讲到的知识点内容，可以通过 v-if 或者 v-show 来进行控制显示隐藏起来，对应的组件内容有对应的标识，如判断首页可以通过字符串或者是数字1代之哪一个都行，这几种方式来实现对应的效果运用先前所讲的知识内容可以完成对应的效果；

下面使用先前所讲的知识内容来实现这个效果：

代码编写：

<div id="app">
    <header>
        <ul>
            <li v-for="(item,index) in nav" :key="index" @click="handChange(index)" :class="isChoose === index+1?'active':''">{{item}}</li>
        </ul>
    </header>

    <home v-show="isChoose===1"></home>     
    <server v-show="isChoose===2"></server>
    <about v-show="isChoose===3"></about>
</div>
<script>
    Vue.component("home",{
        template:`
            <div style="padding:10px">
                / 首页   
            </div>
        `
    })

    Vue.component("server",{
        template:`
            <div style="padding:10px">
                / 服务    
            </div>
        `
    })

    Vue.component("about",{
        template:`
            <div style="padding:10px">
                / 关于
            </div>
        `
    })

    new Vue({
        el:'#app',
        data:{
            nav:['首页','服务','关于'],
            isChoose: 1   // 1.首页 2.服务 3.关于
        },
        methods:{
            handChange(index){
                // console.log(index);
                this.isChoose = index + 1
            }
        }
    })
</script>

        这样一来我们也可以实现了相应的效果了，之前所讲的内容够用，当然啦，在 Vue 中也提供了另外的一种方式，你看看学一学看看好不好用；

---

component 组件

        <component>是一个内置组件，is是固定的属性，依赖 "is" 的值来决定渲染哪一个组件；现在来通过对以上代码的一个修改！

<div id="app">
    
    <header>
        <ul>
            <li v-for="item in nav" :key="item.id" @click="handChange(item)" :class="isChoose == item.id?'active':''">{{item.title}}</li>
        </ul>
    </header>

    <component :is="isChoose"></component>

</div>
<script>
    Vue.component("home",{
        template:`
            <div style="padding:10px">
                / 首页   
            </div>
        `
    })

    Vue.component("server",{
        template:`
            <div style="padding:10px">
                / 服务    
            </div>
        `
    })

    Vue.component("about",{
        template:`
            <div style="padding:10px">
                / 关于
            </div>
        `
    })

    new Vue({
        el:'#app',
        data:{
            nav:[{title:'首页',id:'home'},{title:'服务',id:'server'},{title:'关于',id:'about'}],
            isChoose: 'home'  
        },
        methods:{
            handChange(item){
                // console.log(item);
                this.isChoose = item.id
            }
        }
    })
</script>

        依然能够完成这个效果，这就是使用component这个内置组件来渲染某个组件实现动态组件的方式。

keep - alive 缓存组件

        通过 component 内置组件完成不同组件的一个动态切换，那么这样来回的切换，又会有什么问题呢？下面我们通过一个小例子测试一下：

在上面的案例当中来添加一个内容：如下

<script>
    Vue.component("home",{
        template:`
            <div style="padding:10px">
                / 首页 
                <hr>
                <p style="margin-top:20px">
                    账户：<input type="text" />
                </p>
                <p>
                    密码：<input type="password">
                </p>
            </div>
        `
    })
...

添加了input框，然后随意的输入一些字符：

 然后切换到【服务】后切换回【首页】，很显然输入框当中的数据已经没有了；

 如何在切换的时候能够将内容的数据进行一个保留呢？就需要用到缓存组件 <keep-alive>，将要进行缓存的部分用一个<keep-alive>进行包裹起来；

<div id="app">
    <header>
        <ul>
            <li v-for="item in nav" :key="item.id" @click="handChange(item)" :class="isChoose == item.id?'active':''">{{item.title}}</li>
        </ul>
    </header>

    <keep-alive>
        <component :is="isChoose"></component>
    </keep-alive>
...

这个时候可以测试一下切换后，数据并没有消失，而是保留了下来：

这就是 <keep-alive> 缓存组件的一个基本使用，保留状态，避免重新渲染！​​​​​​​

        以上就是本篇的内容，通过component内置的组件以及它的一个is属性，依赖is的值决定渲染出来哪一个组件在页面当中；附上地址：component | 内置组件 ；通过component实现动态组件（组件的动态切换）的效果，附上地址：动态组件；通过不同组件间的动态切换对当中的某些状态需要保留，可以使用 <keep-alive>组件，避免重新渲染；内容就到此结束，感谢大家的支持！