Vue的内置组件--component/transition/transition-group/keep-alive/slot

Vue的内置组件

component

作用：渲染一个“原组件”为动态组件。依

is

的值，来决定那个组件被渲染

props:

is

: -string|ComponentDefinition|ComponentConstructor

inline-template

: -boolean

用法：

动态组件由 vm 实例的属性值

componentId

控制

也能够渲染注册过的组件或 prop 传入的组件

transition

为组件的载入和切换提供动画效果，具有非常强的可定制性，支持

16

个属性和

12

个事件

Props：

name

- string，用于自动生成 CSS 过渡类名。例如：

name: 'fade'

将自动拓展为

.fade-enter

，

.fade-enter-active

等。默认类名为 "v"

appear

- boolean，是否在初始渲染时使用过渡。默认为

false

。

css

- boolean，是否使用 CSS 过渡类。默认为

true

。如果设置为

false

，将只通过组件事件触发注册的

JavaScript 钩子

。

type

- string，指定过渡事件类型，侦听过渡何时结束。有效值为 “

transition

” 和 “

animation

”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

mode

- string，控制离开/进入的过渡时间序列。有效的模式有 “

out-in

” 和 “

in-out

”；默认同时生效。

duration

- number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个

transitionend

或

animationend

事件。

enter-class

- string

leave-class

- string

appear-class

- string

enter-to-class

- string

leave-to-class

- string

appear-to-class

- string

enter-active-class

- string

leave-active-class

- string

appear-active-class

- string

事件：

before-enter

before-leave

before-appear

enter

leave

appear

after-enter

after-leave

after-appear

enter-cancelled

leave-cancelled

(v-show only)

appear-cancelled

用法：

元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在检测过的组件层级中。

<!-- 简单元素 -->
<transition>
  <div v-if="ok">toggled content</div>
</transition>
           

<!-- 动态组件 -->
<transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</transition>
           

<!-- 事件钩子 -->
<div id="transition-demo">
  <transition @after-enter="transitionComplete">
    <div v-show="ok">toggled content</div>
  </transition>
</div>
           

new Vue({
  ...
  methods: {
    transitionComplete: function (el) {
      // 传入 'el' 这个 DOM 元素作为参数。
    }
  }
  ...
}).$mount('#transition-demo')
           

transition-group

Props：

tag

- string，默认为 span

move-class

- 覆盖移动过渡期间应用的 CSS 类。

除了

mode

，其他特性和 相同。

事件：

事件和 相同。

用法：

元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ，可以通过 tag 属性配置哪个元素应该被渲染。

注意，每个 的子节点必须有 独立的 key ，动画才能正常工作

支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它将会获取应用 CSS 移动类 (通过 name 属性或配置 move-class 属性自动生成)。如果 CSS transform 属性是“可过渡”属性，当应用移动类时，将会使用 FLIP 技术 使元素流畅地到达动画终点。

<transition-group tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</transition-group>
           

关于过渡

详见：过渡：进入，离开和列表

keep-alive

props:

include

-字符串或正则表达式。只有名称匹配的组件会被缓存

exclude

-字符串或正则表达式。任何名称匹配的组件都不会被缓存

max

-数字。最多可以缓存多少组件实例

用法：

<keep-alive

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和

<transition>

相似，

<keep-alive>

它是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中。

当组件在

<keep-alive>

内被切换，它的

activated

和

deactivated

这两个生命周期钩子函数将会被对应执行。

基本

<keep-alive>
  <component :is="view"></component>
</keep-alive>
           

多个条件判断的子组件

<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
           

和

<transition>

一起使用

<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
           

slot

props:

name

：-string，用于命名插槽

用法：

<slot>

元素作为组件模板之中的内容分发插槽。

<slot>

元素自身将被替换。

关于插槽：

在2.6.0中，官方文档为具名插槽和作用域插槽引入了一个新的同意的语法（即

v-slot

指令）。

什么是插槽？

通俗来说，将内容插入组件模板。官方语言：内容分发。

按道理来说，在组件元素的标签内部不允许加入其他内容，这在渲染时会被忽略掉。如下:

<template>
  <div>
    <div class = "a">2019.7.29</div>
    <test-component>
      啊啊啊啊
    </test-component>
  </div>
</template>
           

test-component

模板内容:

<template>
    <div>
    第一Tom
    </div>
</template>
           

在运行时，

啊啊啊啊

这几个字没有用，不会加载出来，甚至报错。

运用

<slot></slot>

test-component

模板内容:

<template>
    <div>
    第一Tom
    <slot></slot>
    </div>
</template>
           

<slot></slot>

的位置，就是运用模板时，模板元素标签中添加的内容，随便什么内容都可以。再加标签也可以

<template>
  <div>
    <div class = "a">2019.7.29</div>
    <test-component>
      啊啊啊啊
      <button>按钮</button>
    </test-component>
  </div>
</template>
           

这儿的

啊啊啊啊

和

按钮

都会正常显示

想在组件模板的不同地方分发内容就用到了

具名插槽

具名插槽，顾名思义：就是给插槽取个名字

如下运用：

<template>
  <div>
    <div class = "a">2019.7.29</div>
    <test-component>
        <template slot="a">
        啊啊啊啊
        </template>
        <template slot="b">
            <button>按钮</button>
        </template>
    </test-component>
  </div>
</template>
           

test-component

模板

<template>
    <div>
    <slot name="a"></slot>
    第一Tom
    <slot name="b"></slot>
    </div>
</template>
           

作用域插槽

详见

插槽对于vue是个很重要的东西，具体最新的更新还是

详见：官网