vue(五)-cnblog

vue(五)

1.动态组件

• 组件的显示与隐藏切换

1.1 <component> 组件

• 组件的一个占位符
• 通过设置属性来显示不同的组件
• is属性来指定要显示哪个属性

示例

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
 
      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->
 
      <component is="Left"></component>
 
      <!-- <Left></Left> -->
    </div>
  </div>
</template>
 
<script>
// 导入left组件
 
import Left from "@/components/Left.vue"
export default {
 
  components:{
    Left
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

示例：组件按需切换

<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 组件 -->
 
      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->
 
      <component :is="comName"></component>
 
      
 
      <!-- <Left></Left> -->
    </div>
  </div>
</template>
 
<script>
// 导入left组件
 
import Left from "@/components/Left.vue"
 
// 导入Right组件
 
import Right from "@/components/Right.vue"
export default {
 
  // 使用data存储要展示的组件名称
 
  data(){
    return {
      comName:'left'  
    }
  },
 
  components:{
    Left,
    Right
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

1.2 组件被切换时

• 默认会被销毁和创建

• left组件

<template>
  <div class="left-container">
    <h3>Left 组件----------{{count}}</h3>
    <button @click="count+=1">+1</button>
  </div>
</template>
 
<script>
export default {
 
  data(){
    return {
      count:0
    }
  },
 
  created(){
    console.log('left组件被创建');
  },
 
  destroyed(){
    console.log('left组件被销毁');
  }
}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• app根组件

<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 组件 -->
 
      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->
 
      <component :is="comName"></component>
 
      
 
      <!-- <Left></Left> -->
    </div>
  </div>
</template>
 
<script>
// 导入left组件
 
import Left from "@/components/Left.vue"
 
// 导入Right组件
 
import Right from "@/components/Right.vue"
export default {
 
  // 使用data存储要展示的组件名称
 
  data(){
    return {
      comName:'left'  
    }
  },
 
  components:{
    Left,
    Right
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

1.3 keep-alive 保持状态

• 一个内置的标签（）

• 在其文本区域放置要保持状态的组件

• 结果

• 组件在切换时，不在被销毁，而是被缓存，不在被创建，而是被激活

1.3.2 keep-alive状态下的生命周期

• 组件被缓存时，触发deactivated生命周期函数
• 组件被激活时，触发activated生命周期函数

示例

• left组件

<template>
  <div class="left-container">
    <h3>Left 组件----------{{count}}</h3>
    <button @click="count+=1">+1</button>
  </div>
</template>
 
<script>
export default {
 
  data(){
    return {
      count:0
    }
  },
 
  created(){
    console.log('left组件被创建');
  },
 
  destroyed(){
    console.log('left组件被销毁');
  },
 
  // 在keep-alive状态下的生命周期
 
  deactivated(){
    console.log('left组件被缓存');
    
  },
 
  activated () {
    console.log('left组件被激活');
  }
}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• app根组件

<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 组件 -->
 
      <!-- 使用内置的component组件 -->
      <!-- 占位符，按需渲染不同的组件 -->
 
 
      <!-- keep-alive标签保持组件的状态 -->
      <keep-alive>
 
          <component :is="comName"></component>
      </keep-alive>
      
 
      
 
      <!-- <Left></Left> -->
    </div>
  </div>
</template>
 
<script>
// 导入left组件
 
import Left from "@/components/Left.vue"
 
// 导入Right组件
 
import Right from "@/components/Right.vue"
export default {
 
  // 使用data存储要展示的组件名称
 
  data(){
    return {
      comName:'left'  
    }
  },
 
  components:{
    Left,
    Right
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

1.4 keep-alive的include和exclude属性

• include属性：决定哪些组件被缓存
• exclude属性：决定哪些组件不被缓存
• include和exclude不可同时使用
• keep-alive默认缓存所有的组件

示例

• 只缓存Left组件

<keep-alive include="Left">
 
          <component :is="comName"></component>
      </keep-alive>

1.5 声明组件时为组件起名称

• export default 中的name属性
• Right组件起名称

<template>
  <div class="right-container">
    <h3>Right 组件</h3>
  </div>
</template>
 
<script>
export default {
 
  // 为组件起自己的名称
 
  name:'MyRight'
}
</script>
 
<style lang="less">
.right-container {
  padding: 0 20px 20px;
  background-color: lightskyblue;
  min-height: 250px;
  flex: 1;
}
</style>
 

• 效果图

注意点

• 注册名称用于标签使用组件
• 声明的名称不管调试，还是keep-alive的exlude，include属性都用这个

2. 插槽

• 定义

插槽（Slot）：vue组件中的占位符：把不确定的，希望由用户指定的部分

• 图解

2.1 插槽的使用

• <slot></slot>插槽占位符的使用

• left组件使用插槽占位符

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- 定义插槽占位符 -->
 
    <slot></slot>
  </div>
</template>
 
<script>
export default {}
</script>
 
<style lang="less">
.left-container {
  padding: 0 20px 20px;
  background-color: orange;
  min-height: 250px;
  flex: 1;
}
</style>
 

• app使用left组件，在插槽位置自定义内容

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <hr />
 
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
 
      <!-- Left插槽 -->
 
      <Left>
          <!-- 插槽位置自定义内容 -->
 
          <p>用户自定义</p>
      </Left>
    </div>
  </div>
</template>
 
<script>
// 导入Left组件
import Left from '@/components/Left.vue'
export default {
 
  components:{
    Left,
  }
}
</script>
 
<style lang="less">
.app-container {
  padding: 1px 20px 20px;
  background-color: #efefef;
}
.box {
  display: flex;
}
</style>
 

• 效果图

2.2 具名插槽

• vue官方规定，每个插槽都有一个name属性，如果不指定，默认name的值为default

• 默认情况下，使用组件时，组件的内容部分默认渲染到name属性值为default的插槽处

2.3 将内容渲染到指定插槽

示例：填充到default插槽

• app要填充的内容

<Left>
          <!-- 插槽位置自定义内容 -->
          <!-- 将内容填充到指定的插槽，使用v-slot指令 -->
          <template v-slot:default>
              <p>用户自定义</p>
          </template>
          
      </Left>

• left组件的插槽部分

<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <!-- 定义插槽占位符 -->
 
    <slot name="default"></slot>
  </div>
</template>

注意点

• v-slot指令需要添加到<template>标签上