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
网友评论