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>
       showContent
   </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>