牧云流

Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot

component组件

动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。

下面的例子是一个简单的切换编辑器的组件，只在演示component组件的用法

<div class="editors">
   <button @click="currentEditor='TinymceEditor'">富文本编辑器button>
   <button @click="currentEditor='MarkdownEditor'">Markdown编辑器button>
   <component :is="currentEditor">component>
 div>

Vue部分

components: {
  MarkdownEditor, TinymceEditor
},
data () {
  return {
    currentEditor: 'TinymceEditor',
  }
}

如果监听两个编辑器组件的生命周期会发现，每次切换，组件都会重走生命周期

keep-alive组件

能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive组件的属性：

include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
PS：这里说的匹配的组件是通过vue组件name属性匹配的，而不是router配置的name


<div class="editors">
   <button @click="currentEditor='TinymceEditor'">富文本编辑器button>
   <button @click="currentEditor='MarkdownEditor'">Markdown编辑器button>
   <keep-alive include="TinymceEditor">
   	  <component :is="currentEditor">component>
   keep-alive>
 div>

这时候，如果监听两个编辑器组件的生命周期会发现，每次切换，TinymceEditor组件created之后不会被销毁,MarkdownEditor组件则会重走生命周期。

transition组件

transition组件在下列情况下为组件（或元素）的载入和切换提供过渡或动画效果

条件渲染（使用 v-if）
条件展示（使用 v-show）
动态组件
组件根节点

过渡的状态分为进入/离开两大类，如下面的例子中，为组件进入绑定了过渡效果

<transition
  enter-active-class="animate__animated animate__fadeInRight"
  :duration="{ enter: 1000 }"
>
  <component :is="currentEditor"/>
transition>

transition组件的使用方式比较多，这里只介绍一种与animate.css的方法，详细可以参考官网
https://cn.vuejs.org/v2/guide/transitions.html

transition-group组件

transition-group组件为多个元素/组件的过渡效果

slot组件

slot又称插槽，在子组件中使用slot组件，在组件渲染时，slot组件将会被替换为父组件的模板内容，slot组件相当于子组件留给父组件的占位符。

父组件

<child>
  <p slot="title">具名插槽title的内容p>
  <p>默认插槽的内容p>
child>

子组件(Child)

  <div>
    <slot name="title">slot>
    <slot>slot>
  div>

默认插槽和具名插槽

组件拥有name属性，可以用来定义额外的插槽，如果不指定则默认为“default”，这样的插槽称为默认插槽或匿名插槽，指定name属性则称为具名插槽。

作用域插槽

通过作用域插槽，父组件可以获取到子组件的数据。