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是個很重要的東西，具體最新的更新還是

詳見：官網