内置的组件

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

1 component

props:isinline-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),在过渡/动画完成之后移除

image.png

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指令
插槽(默认,具名,作用域)


怼怼
73 声望6 粉丝