Vue内置组件

布满荆棘的人生 2024-04-17 06:01 63阅读 0赞

### Vue内置组件 ###

*  component
 *  transition
 *  transition-group
 *  keep-alive
 *  include and exclude
 *  max
 *  slot

# component #

*  Props：
    
     *  `is` \- string | ComponentDefinition | ComponentConstructor
     *  `inline-template` \- boolean
 *  用法：渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<component :is="componentId"></component>
    
    
    <component :is="$options.components.child"></component>

# transition #

*  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`
 *  用法：`<transition>` 元素作为单个元素/组件的过渡效果。`<transition>` 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 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`，其他特性和 `<transition>` 相同。
 *  事件：事件和 `<transition>` 相同。
 *  用法：`<transition-group>` 元素作为多个元素/组件的过渡效果。`<transition-group>` 渲染一个真实的 DOM 元素。默认渲染 `<span>`，可以通过 `tag` 属性配置哪个元素应该被渲染。

> 注意，每个 `<transition-group>` 的子节点必须有 独立的 key ，动画才能正常工作

`<transition-group>` 支持通过 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` 这两个生命周期钩子函数将会被对应执行。

在 2.2.0 及其更高版本中，`activated` 和 `deactivated` 将会在 `<keep-alive>` 树内的所有嵌套组件中触发。

主要用于保留组件状态或避免重新渲染。

<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>
      <keep-alive>
        <component :is="view"></component>
      </keep-alive>
    </transition>

> 注意，`<keep-alive>` 是用在其一个直属的子组件被开关的情形。如果你在其中有 `v-for` 则不会工作。如果有上述的多个条件性的子元素，`<keep-alive>` 要求同时只有一个子元素被渲染。

# include and exclude #

2.1.0 新增  
include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

<keep-alive include="a,b">
      <component :is="view"></component>
    </keep-alive>
    
    
    <keep-alive :include="/a|b/">
      <component :is="view"></component>
    </keep-alive>
    
    
    <keep-alive :include="['a', 'b']">
      <component :is="view"></component>
    </keep-alive>

匹配首先检查组件自身的 `name` 选项，如果 `name` 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

# max #

2.5.0 新增  
最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

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

不会在函数式组件中正常工作，因为它们没有缓存实例。

# slot #

*  Props：`name` \- string，用于命名插槽。
 *  Usage：`<slot>` 元素作为组件模板之中的内容分发插槽。`<slot>` 元素自身将被替换。