内置的组件
- component
- transition
- transition-group
- keep-alive
- 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将会做以下解决
- 判断元素是否利用了CSS过渡或动画，在失当的机会增加/删除CSS类名
- 如果过渡组件提供了
钩子函数，这些钩子函数将在失当的机会被调用 - 如果没有上述的两个条件，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指令
插槽(默认，具名，作用域)