vue中Slot插槽的使用

1.solt插槽

概念：

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。

import Vue from 'vue'
// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <slot></slot> // 定义插槽
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123'
        }
    },
    template: `
        <div>
            <com-one>
                <span>{{val1}}</span> // 使用插槽
            </com-one>
        </div>
    `
})

插槽分为三种: 匿名插槽、具名插槽、作用域插槽

1.匿名插槽：

  <div id="app">
    <!-- 这里的所有组件标签中嵌套的内容会替换掉slot  如果不传值 则使用 slot 中的默认值  -->  
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
		# 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
		# 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认内容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

2.具名插槽

默认插槽就是指没有名字的插槽，子组件未定义的名字的插槽，父级将会把 未指定插槽的填充的内容填充到默认插槽中。

 用法：当我们需要多个插槽时，于是有了具名插槽，让插槽位置与插入的内容一 一对应

//父组件
<body-container>
  <div slot='header'>
    <!-- 我们希望把页头放这里 -->
  </div>
  <div slot='footer'> 
    <!-- 我们希望把页脚放这里 -->
  </div>
</body-container>
 
//子组件
<div>
    <slot name='header'></slot>
    <div>context</div>
    <slot name='footer'></slot>
</div>

3.作用域插槽

父组件对子组件加工处理

既可以复用子组件的slot，又可以使slot内容不一致

  <div id="app">
    <!-- 
		1、当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，
		但样式希望不一样 这个时候我们需要使用作用域插槽 
		
	-->  
    <fruit-list :list='list'>
       <!-- 2、 父组件中使用了<template>元素,而且包含scope="slotProps",
			slotProps在这里只是临时变量   
		---> 	
      <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>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
			###  3、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
			###   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
					如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>