VUE动态组件,插槽和自定义指令

动态组件

1.component组件的使用

1.什么是动态组件?动态组件就是指的是动态切换组件的显示和隐藏

可以把component理解为一个占位符,专门为组件占位,需要展示哪个组件,就给component指定组件的名称即可
如下:


但此时会发现上面的值是写死的,下面代码案例就可以实现动态绑定了

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
    <button @click="comName='left'">展示Left</button>
    <button @click="comName='right'">展示Right</button>
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- <left></left>
      <right></right> -->
      <keep-alive>
        <component :is='comName'></component>
      </keep-alive>
    </div>
  </div>
</template>

<script>
import left from '@/components/Left.vue'
import right from '@/components/Right.vue'
export default {
   
  data(){
   
    return{
   
      comName:'right'
    }
  },
  components:{
   
    left,
    right
  }
}
</script>

<style lang="less">
.app-container {
   
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
   
  display: flex;
}
</style>

-keep-alive的使用

当在left组件定义个按钮,让其值自增1,初始值为0,当加到某一值时,切换right组件,再切换回来,就会发现left值又回到了初始值,如下:

初始值为0,加到了18

点击切换到right组件

再点回来left组件

可以发现left组件切换后回到了初始值,保存不了数据(即每次切换组件都是组件重新渲染了,就是组件创建–销毁—创建–销毁的过程)
可以通过-keep-alive解决这个问题(就是保持组件的状态)

<div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
      <!-- <left></left>
      <right></right> -->
      <keep-alive>
        <component