美文网首页
学习笔记《Vue 内置组件》

学习笔记《Vue 内置组件》

作者: 马文Marvin | 来源:发表于2017-11-25 22:54 被阅读192次

    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

    相关文章

      网友评论

          本文标题:学习笔记《Vue 内置组件》

          本文链接:https://www.haomeiwen.com/subject/xpofbxtx.html