第八十七篇：Vue动态切换组件的展示和隐藏

好家伙，

 

1.什么是动态组件？

 

动态组件指的是动态切换组件的限制与隐藏

 

2.如何实现动态组件渲染

vue提供了一个内置的<component>组件,专门用来实现动态组件的渲染.

 

可以将其看最占位符来用

 

2.1.其基本用法

<component is="Left"></component>

//其中is绑定的值就是其要渲染的组件

 

2.2.以下为动态写法:

<template>
  <div>
    <Left></Left>
   <!-- 上下等价   -->
   <component :is="comName">
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  data(){
    return{
      comName:'Left'
    }
  },
     components:{
        Left,
        Right 
     }
}
</script>

 

3.实现组件的按需展示

来需求了

客户希望能点击A按钮出现一个A组件,

　　　　点击B按钮后切换成B组件,

 

<template>
  <div>
    <button @click="comName='Left'">首页</button>
    <button @click="comName='Right'">我的</button>
   <component :is="comName"></component>
  </div>
</template>

<script>
//1.导入需要的组件
import Left from './components/Left.vue'
import Right from './components/Right.vue'

export default {
  data(){
    return{
      comName:'Left'
    }
  },
     components:{
        Left,
        Right 
       //简写为 Left
     }
}
</script>

 

来看看效果吧

 

有内味了,

像是我们一般进入淘宝那样,

在最下面那行

点击首页就看到首页,

点购物车就看到购物车

(类似这样...的效果)