Vue组件之--slot内容分发

以前，Vue组件总是一个个的空标签的形式出现的，那么如果说组件标签里面有内容，那么要获取这些内容要怎么办呢？

Vue提供了一个解决方案：slot内容分发，其作用就是用来获取组件中的原内容（就是组件标签内部的内容）。

用法分为两种情况:当组件内的原内容结构比较简单的时候可以使用单一slot，当原内容结构比较复杂的时候使用具名slot；

单一slot：在组件模板合适的位置插入slot组件即可；

 <div id="container" v-cloak>
     <my-compo>你好，2018！</my-compo>
     <!-- 在这里组件的原内容是：你好，2018 ，比较简单-->
 </div>
 <!-- 在组件模板中获原内容 -->
  <template id="myCompon">
     <div class="content">
         <h3>{{house.price}}</h3>
         <slot>没有原内容</slot>
         <!-- 当没有原内容的时候就会显示“没有原内容”，有的话就会被替换成原内容 -->
     </div>
 </template>

具名slot： 给你想获取的原内容部分指定一个属性`slot = "值"`，然后在在组件的模板中的合适位置插入一个slot元素，设定`name= "值"`即可。例如：

 <div id="container" v-cloak>
     <my-compon1>
         <div slot = "smile">
             <i>哈哈</i>
         </div>
         <ul slot="list">
             <li>111</li>
             <li>222</li>
             <li>333</li>
         </ul>
     </my-compon1>
     <!-- 原内容结构比较复杂 -->
     <!-- 获取原内容中你想要的那一部分 -->
 </div>
 <!-- 获取你想要的那一部分 -->
 <template id="myCompon1">
     <div>
         <slot name="smile"></slot>
         <!-- 这个时候，在组件内部含有属性slot="smile"的元素包裹的原内容就会被显示到这里 -->
         <h4>{{clothes}}</h4>
         <!-- 同上 -->
         <slot name="list"></slot>
     </div>
 </template>

作用域插槽slot:

首先要将子组件的数据传递给子组件模板中的slot插槽（v-bind绑定属性）:

<!-- 子组件模板 -->
    <template id="sonTemplate">
        <div class="son-class">
            <slot v-bind:heheda="computer.price" v-bind:materials="computer.material"></slot>
        </div>
    </template>

然后在父组件模板中具有特殊特性 slot-scope的 <template> 元素必须存在，表示它是作用域插槽的模板（ 也就是说被<template slot-scope></template>元素包围内容就是slot的模板，在渲染的时候slot就会被渲染成该模板内容）,slot-scope的值将被当作一个临时的变量名，此变量用来接收从子组件传递过来的props对象(就是一个数据对象)；

<!-- 父组件模板 -->
    <template id="compo">
        <div>
            <h3>{{greeting}}</h3>
             <my-app-son>
                 <!-- 这里  <template slot-scope = "props">就是slot插槽的模板,也就是说在渲染的时候slot会被渲染成该模板包裹着的内容-->
                <template slot-scope = "props">
                    <!-- 这里的props就是一个包含有属性heheda和materials的对象 -->
                    <h3>{{greeting}}</h3>
                    <h4>{{props.heheda}}</h4>
                    <h4>{{props.materials}}</h4>
                </template>
             </my-app-son>
        </div>
    </template>

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>了
作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：

<!-- <my-awesome-list>是一个子组件，子组件绑定的属性items，数据是来源于父组件 -->
<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <li
    slot="item"
    slot-scope="props"
    class="my-fancy-item">
    {{ props.text }}
  </li>
</my-awesome-list>

列表组件的模板：

<ul>
    <!--子组件模板， 这里的items应该是通过父子通信获得的 -->
  <slot name="item" v-for="item in items" :text="item.text"></slot>
</ul>

注意：在分析组件+slot具体出来的内容是什么的时候，可以先将组件内部的原内容给剥离出来,在此基础上进行分析在没有原内容的时候组件将会是什么样子，
然后再在分析结果的基础上将原内容加上，再进行分析，最后得出结果

Vue组件之--slot内容分发

猜你喜欢