Vue学习笔记：Slot

转自：https://www.w3cplus.com/vue/vue-slot.html

在Vue中，slot也分多种，从Vue的官网中可以获知，其主要分为：单个插槽、具名插槽和作用域插槽三种

父组件的内容是在父组件作用域编译，子组件的内容是在子组件作用域编译。
Vue的slot一般用在父组件向子组件分发内容，该内容的编译作用域名为父组件作用域。
父组件分发内容给子组件，子组件需要一个<slot></slot>标签进行接收，分发和接收同时才能真正实现分发

如果子组件template中没有包含任何一个<slot>时，就算父组件分发再多的内容也将会被丢弃。只有子组件模板只要有一个没有属性的slot（因为在模板中可以有多个带属性的slot，后面的内容会介绍），父组件传入的整个内容片段将插入到slot所在的DOM位置，并将替换掉slot本身。

最初在<slot>中的任何内容都被视为备用内容（也可以在最初的<slot>中不放置任何默认内容）。备用内容在子组件的作用域内编译，并且只有在宿主元素（父组件没有分发任何内容）为空，且没有要插入的内容时才显示备用内容。

单个插槽

子组件中使用一个默认的<slot></slot>接收分发的所有内容。

具名插槽

<slot>可以用一个特殊的属性name来进一步配置父组件如何分发内容。多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应slot特性的元素。

仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

//子组件根据名称接收分发的内容

<template id="modal">

    <div class="modal-backdrop">

        <div class="modal" @click.stop>

            <slot name="header"></slot>

            <slot name="body"></slot>

            <slot name="footer"></slot>

        </div>

    </div>

</template>

　　父组件根据slot名称进行分发的

<div id="app">

      <modal v-show="toggleModal" @click="closeModal">

         <div class="modal-header" slot="header">

             <div class="close rotate" @click="closeModal">

                <i class="fa-times fa"></i>

            </div>

            <h3 class="modal-title">Modal Header</h3>

       </div>

       <div class="modal-body" slot="body">

            <h3>Modal Body</h3>

            <p>Modal body conent...</p>

        </div>

        <div class="modal-footer" slot="footer">

             <button class="btn" @click="closeModal">关闭</button>

        </div>

     </modal>

     <button class="btn btn-open" @click="showModal">Show Modal</button>
 </div>

作用域插槽

作用域插槽是一种特殊类型的插槽，用作一个（能被传递数据的）可重用模板，来代替已经渲染好的元素。

在子组件中，只需将数据传递到插槽，就像你将prop传递给组件一样：

在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象：

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：

//父组件
<div id="app">

  <!--Shapes-->

  <my-list :items="shapes" title="Shapes">

    <template scope="shape">

      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>

    </template>

  </my-list>

  <!--Colors-->

  <my-list :items="colors" title="Colors">

    <template scope="color">

      <div>

        <div class="swatch" :style="{ background: color.hex }"></div>

        {{ color.name }}

      </div>

    </template>

  </my-list>

</div>

//子组件

<script type="text/x-template" id="my-list">

<div class="my-list">

  <div class="title">{{ title }}</div>

  <div class="list">

    <div class="list-item" v-for="item in items">

      <slot v-bind="item"></slot>

    </div>

  </div>

</div>

</script>

//全局子组件
Vue.component('my-list', {

  template: '#my-list',

  props: [ 'title', 'items' ]

});

//实例化的数据初始化

new Vue({

  el: '#app',

  data: {

    shapes: [

      { name: 'Square', sides: 4 },

      { name: 'Hexagon', sides: 6 },

      { name: 'Triangle', sides: 3 }

    ],

    colors: [

      { name: 'Yellow', hex: '#F4D03F', },

      { name: 'Green', hex: '#229954' },

      { name: 'Purple', hex: '#9B59B6' }

    ]

  }

});

如果想进一步的了解slot中的作用域插槽，可以阅读《Vue的作用域插槽》一文。著作权归作者所有。

总结：

这篇文章主要学习和了解了Vue中的插槽<slot>。是一个空壳子，它显示与否以及怎么显示完全是由父组件来控制。不过，插槽显示的位置由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。在写一些组件的时候，slot能帮助我们做很多事情，也能让组件可复用性变得更为灵活。

巴特西

Vue学习笔记：Slot

单个插槽

具名插槽

作用域插槽

总结：

最新文章

热门文章