学习笔记《Vue 内置组件》

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

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

component

最标准的组件类型,支持两个基础属性 isinline-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

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

<!-- 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