内置的组件

1. component
2. transition
3. transition-group
4. keep-alive
5. slot

1 component

props：is、inline-template
能够依据数据动静渲染组件
具体见上一章节的 is 属性

2 transition

包裹一个 元素 或动静组件 ，实现 过渡 的成果
一般元素示例

<template>
  <div id="app">
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">hello world</p>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {show: true,};
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s;}
.fade-enter,
.fade-leave-to {opacity: 0;}
</style>

在扭转 v-if 的值的时候并没有 立刻删除 元素，这是因为当插入或删除蕴含在 transition 组件中的元素，Vue 将会做以下解决

1. 判断元素是否利用了 CSS过渡 或动画，在失当的机会增加 / 删除CSS 类名
2. 如果过渡组件提供了 钩子函数，这些钩子函数将在失当的机会被调用
3. 如果没有上述的两个条件，DOM 操作在下一帧 立刻执行

2.1 transition 的属性

name：主动生成 CSS 过渡类名
appear：是否在初始渲染时应用过渡
css：是否应用 css 过渡类
type：指定过渡事件的类型，侦听过渡何时完结，transition | animation
mode：管制来到 / 进入过渡的工夫序列，out-in | in-out
duration：指定过渡的持续时间，number|{enter:number,leave:number}

仅应用 js 过渡的元素增加 v -bind:css=”false”，跳过 CSS 的检测，防止过渡过程中 CSS 的影响

2.2 过渡的类名

v取决于 transition 的 name 属性

v-enter: 进入过渡的 开始 状态

在元素被 插入之前 失效，在元素被 插入之后 的下一帧移除

v-enter-active：进入过渡 失效 时的状态

元素被 插入之前 失效，在 过渡 / 动画实现之后 移除。能够定义过渡的过程工夫，提早和曲线函数

v-enter-to：进入过渡的 完结 状态

元素被 插入之后 下一帧失效 (移除 v -enter)，在 过渡 / 动画实现 后移除

v-leave：来到过渡的 开始 状态

来到过渡被触发时立即失效，下一帧移除

v-leave-active：来到过渡的 失效 时的状态

来到过渡被触发时立即失效，在过渡 / 动画实现之后移除。能够定义来到过渡的过程工夫，提早和曲线函数

v-leave-to：来到过渡的 完结 状态

来到过渡被触发之后下一帧失效(移除 v -leave)，在过渡 / 动画实现之后移除

2.3 钩子函数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

enter 和 leave 中必须应用 done 进行回调

其余无关 Vue 过渡的介绍见官网
过渡 & 动画

3 transition-group

多组件过渡
属性：

• tag：指定标签，默认为 span
• move-class：笼罩挪动过渡期间利用的 CSS 类
• 除了 mode，其余与 transition 雷同

事件与 transition 雷同
具体介绍见官网动画 & 过渡

4 keep-alive

包裹动静组件，会缓存不流动的组件实例，不销毁
属性

• include：String|RegExp，缓存指定的组件
• exclude：String|RegExp，回绝缓存指定的组件
• max：number，最多能够缓存多少组件实例

// 子组件一
<template>
  <div>One</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
};
</script>
// 子组件二
<template>
  <div>Two</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
};
</script>
// 父组件
<template>
  <div id="app">
    <button :value="component" @click="component ='One'"> 组件一 </button>
    <button :value="component" @click="component ='Two'"> 组件二 </button>
    <component :is="component"></component>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {One: () => import("./components/One.vue"),
    Two: () => import("./components/Two.vue"),
  },
  data() {
    return {component: "One",};
  },
  methods: {},};
</script>

在不增加 keep-alive 时，切换组件时会间接 销毁 转出的组件

// 父组件
<keep-alive>
  <component :is="component"></component>
</keep-alive>
// 子组件一
<template>
  <div>One</div>
</template>

<script>
export default {beforeDestroy() {console.log("销毁");
  },
  activated() {console.log("进入 One");
  },
  deactivated() {console.log("来到 One");
  },
};
</script>
// 子组件二同上

应用 keep-alive 会多两个生命周期钩子
activated：当切换 回组件时调用
deactivated：当切换 出组件时调用

5 slot

作为组件模板之中的内容散发 插槽
属性

• name：命名插槽
• 绑定值：作用域插槽

vm.$slots 和 vm.$scopedSlots 属性
v-slot 指令
插槽(默认，具名，作用域)