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

怼烎@ 2022-11-11 05:09 200阅读 0赞

# 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>包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。  
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组件的使用方式比较多，这里只介绍一种与animate.css的方法，详细可以参考官网  
[https://cn.vuejs.org/v2/guide/transitions.html][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>