Vue学习计划-Vue2--VueCLi（六）插槽、过渡

写在最前：父组件引用子组件，如何能在应用子组件内容的同时，还能在自定义内容呢？

1. 插槽

1. 作用： 让父组件可以向子组件指定位置插入html结构，也是一种组件通信的方式，适用于父组件===>子组件
2. 分类： 默认插槽，具名插槽，作用域插槽
3. 使用方式：
   1. 默认插槽

   父组件中：
   
   <MyContainer>
     <div>html结构</div>
   </MyContainer>
   
   子组件中：
   <template>
       <div>
           <!-- 定义插槽 -->
           <slot>插槽默认内容</slot>
       </div>
   </template>
   

   2. 具名插槽

   父组件中：
   
   <MyContainer>
     <template slot="content">
      <div>html结构</div>
     </template>
     <template v-slot:content>
       <div>html结构</div>
     </template>
   </MyContainer>
   
   子组件中：
   <template>
       <div class="container">
           <!-- 具名插槽 -->
           <slot name="content">插槽默认内容</slot>
           <slot name="footer">插槽默认内容</slot>
       </div>
   </template>
   

   3. 作用域插槽
      1. 理解：数据在组件自身，但根据数据生成的结构需要组件的使用者来决定。
      2. 具体编码：

   父组件：
    <template slot-scope="list">
       <h3  v-for="(item,index) in list.data" :key="index">{{ item }}</h3>
   </template>
   
   子组件：
   <template>
       <div>
           <slot :data="fineList"></slot>
       </div>
   </template>
   <script>
   export default {
       data(){
           return {
             fineList: [ 'node', 'yarn', 'npm', 'cnpm']
           }
       }
   }
   
   
   </script>
   

示例：准备两个组件：父组件App.vue，子组件MyContainer.vue
1. 父组件App.vue内：

2. 子组件MyContainer.vue内：

3. 运行效果：

2. 过渡

1. 作用：在插入、更新或移除DOM时，在合适的时候给元素添加样式类名
2. 写法：
   1. 准备好样式：
      • 元素进入的样式
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to: 进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to: 离开的终点
   2. 使用<transition>包裹要过渡的元素，并配置name属性
      示例：

   <transition name="show">
       <h1 v-show="flag">showContent</h1>
   </transition>
   <style>
   	.anmi-enter {
   	  opacity: 0;
   	}
   	.anmi-enter-active {
   	  transition: all 1s;
   	}
   	.anmi-enter-to {
   	  opacity: 1;
   	}
   	.anmi-leave {
   	  opacity: 1;
   	}
   	.anmi-leave-active {
   	  transition: all 1s;
   	}
   	.anmi-leave-to {
   	  opacity: 0;
   	}
   </style>
   

   3. 备注：若有多个元素需要过渡，则需要使用<transition-group>,且每个元素都有指定key值
      示例：

<template>
  <div>
    <TransitionGroup name="anmi" tag="ul" class="list">
      <li v-for="item in list" :key="item.id">
        {{ item.name }}
        <button @click="list.pop()">删除</button>
      </li>
    </TransitionGroup>
    <button @click="list.push({ id: list.length, name: list.length + '小' })">
      添加
    </button>
  </div>
</template>
<script>
	export default {
	  data() {
	    return {
	      list: [
	        { id: 0, name: "小明" },
	        { id: 1, name: "小红" },
	        { id: 2, name: "小白" },
	      ],
	    };
	  },
	};
</script>
<style>
	.anmi-enter-active {
	  animation: move 1.5s;
	}
	.anmi-leave-active {
	  animation: move 1.5s reverse;
	}
	@keyframes move {
	  0% {
	    opacity: 0;
	  }
	  100% {
	    opacity: 1;
	  }
	}
</style>