vue 插槽

组件插槽的作用

父组件向子组件传递内容

组件插槽的基本用法

1、插槽位置

创建一个新的组件，在组件模板中预留插槽

Vue.component('alert-box', {
      template: `
        <div class="demo-alert-box">
          <strong>ERROR!</strong>
          <slot></slot>
        </div>
      `
    });

2、插槽内容

当我们使用该组件时，组件中的内容会被传递到我们模板中插槽位置当中

<alert-box>这里的内容会到插槽里面！</alert-box>

但是，当我们在创建插槽时，插槽内有内容，也同样会显示出来

具名插槽用法

1、插槽定义

在创建一个名为 base-layout 的组件，添加模板中，给插槽添加name值，这里我们写一个既有有name值的插槽，也有没有name值的插槽

<div>
　　<header>
　　　　<slot name='header'></slot>
　　</header>
　　<main>
　　　　<slot></slot>
　　</main>
　　<footer>
　　　　<slot name='footer'></slot>
　　</footer>
</div>

2、插槽内容

在页面中使用该组件，在组件中的元素，使用 slot 来匹配插槽的名称；如果没有slot值，则默认匹配给没有name属性的插槽

<base-layout>
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

但是当插槽有一定数量后，且每个插槽需要插入的内容不仅仅只是一两个时，非常容易造成混乱，于于是Vue有一个API template，它可以临时性包裹需要插入的内容，且本身不会渲染到页面上，使用时同样利用slot 匹配他们的插槽位置

<base-layout>
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
</base-layout>

作用域插槽

应用场景：父组件对子组件的内容进行加工处理

1、插槽定义

组件模板代码，info 名称是自定义的，用于将值传递给父组件

<ul>
  <li :key='item.id' v-for='item in list'>
    <slot :info='item'>{{item.name}}</slot>
  </li>
</ul>

2、插槽内容

应用组件，在应用组件时，需要将需要的数据通过v-bind绑定，且这里的名称需要和模板中的一致，然后在组件中通过template将要插入的内容包裹，同时需要利用属性slot-scope（该值自定义）取得子组件的值，再在template内加工利用slot-scope取得的内容。

<div id="app">
  <fruit-list :list='list'>
     <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">{{slotProps.info.name}}</strong>
        <span v-else>{{slotProps.info.name}}</span>
     </template>
  </fruit-list>
</div>