• 第二十九篇 动态组件 - component

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

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

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

    代码编写：

    1. "app">
    2.     <header>
    3.         <ul>
    4.             <li v-for="(item,index) in nav" :key="index" @click="handChange(index)" :class="isChoose === index+1?'active':''">{{item}}li>
    5.         ul>
    6.     header>
    7.  
    8.     <home v-show="isChoose===1">home>     
    9.     <server v-show="isChoose===2">server>
    10.     <about v-show="isChoose===3">about>
  • <script>
  • Vue.component("home",{
  • template:`
  • / 首页
  • `
  • })
  • Vue.component("server",{
  • template:`
  • / 服务
  • `
  • })
  • Vue.component("about",{
  • template:`
  • / 关于
  • `
  • })
  • new Vue({
  • el:'#app',
  • data:{
  • nav:['首页','服务','关于'],
  • isChoose: 1 // 1.首页 2.服务 3.关于
  • },
  • methods:{
  • handChange(index){
  • // console.log(index);
  • this.isChoose = index + 1
  • }
  • }
  • })
  • script>

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

    component 组件

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

    1. "app">
    2.     
    3.     <header>
    4.         <ul>
    5.             <li v-for="item in nav" :key="item.id" @click="handChange(item)" :class="isChoose == item.id?'active':''">{{item.title}}li>
    6.         ul>
    7.     header>
    8.  
    9.     <component :is="isChoose">component>
    10.  
    12. <script>
    13.     Vue.component("home",{
    14.         template:`
    15.             
    16.                 / 首页   
    17.             
    18.         `
    19.     })
    20.  
    21.     Vue.component("server",{
    22.         template:`
    23.             
    24.                 / 服务    
    25.             
    26.         `
    27.     })
    28.  
    29.     Vue.component("about",{
    30.         template:`
    31.             
    32.                 / 关于
    33.             
    34.         `
    35.     })
    36.  
    37.     new Vue({
    38.         el:'#app',
    39.         data:{
    40.             nav:[{title:'首页',id:'home'},{title:'服务',id:'server'},{title:'关于',id:'about'}],
    41.             isChoose: 'home'  
    42.         },
    43.         methods:{
    44.             handChange(item){
    45.                 // console.log(item);
    46.                 this.isChoose = item.id
    47.             }
    48.         }
    49.     })
    50. script>

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

    keep - alive 缓存组件

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

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

    1.