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

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>