学习笔记《Vue 内置组件》

Vue的组件有好多种，在实际运用中，根据不同的需求，可以使用不同的类型，系统的学习一下：

• component 组件
• transition 组件
• transition-group 组件
• keep-alive 组件
• slot 组件

component

最标准的组件类型，支持两个基础属性 is 和 inline-template

<component v-bind:is="currentView">
  <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

<my-component inline-template>
  <div>
    <p>These are compiled as the component's own template.</p>
    <p>Not parent's transclusion content.</p>
    <!-- 官方不建议把 template 这么写，写在 template 属性里面或者 .vue -->
  </div>
</my-component>

transition & transition-group

为组件的载入和切换提供动画效果，具有非常强的可定制性，支持16个属性和12个事件，在具体使用的时候可以细细研究，这是详细的文档：

https://vuejs.org/v2/guide/transitions.html

keep-alive

针对组件的缓存问题而设计的，有 include 和 exclude 两个参数进行正则判断是否启用缓存

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

<!-- multiple conditional children -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a><!-- 只有 a > 1 是才进行缓存 -->
  <comp-b v-else></comp-b>
</keep-alive>

<!-- Array (use `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

slot

为父组件留空的一种机制，在<slot></slot>中会插入父组件模板中的相应值，如果父组件中没有值，则显示 <slot></slot> 中的默认值

Suppose we have a component called my-component with the following template:

<div>
  <h2>I'm the child title</h2>
  <slot>
    This will only be displayed if there is no content
    to be distributed.
  </slot>
</div>

And a parent that uses the component:

<div>
  <h1>I'm the parent title</h1>
  <my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>
</div>

The rendered result will be:

<div>
  <h1>I'm the parent title</h1>
  <div>
    <h2>I'm the child title</h2>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </div>
</div>

Slot 的功能可以进一步的加强到：

• 如果子组件有多个 slot，则用 name 属性指定位置，称为Named Slot
• 也可以给 slot 中传值，这种 slot 称为 Scoped Slot

具体可以查看官方文档：

https://vuejs.org/v2/guide/components.html#Named-Slots
https://vuejs.org/v2/guide/components.html#Scoped-Slots