二十二、插槽（slot）

组件的插槽

组件的插槽时为了让我们封装的组件更加具有扩展性
让使用者可以决定组件内部的一些内容到底展示什么

■如何去封装这类的组件

它们也很多区别,但是也有很多共性。
如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。
但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字等等。

■如何封装合适，抽取共性,保留不同。

最好的封装方式就是将共性抽取到组件中,将不同暴露为插槽。
一旦我们预留了插槽,就可以让使用者根据自己的需求,决定插槽中插入什么内容。
是搜索框,还是文字,还是菜单。由调用者自己来决定。

1. 插槽的基本使用：<slot></slot>

2. 插槽的默认值：<slot>button<slot>

3. 如果有多个值，同时放入到组件进行替换时，一起作为替换元素

<!-- 
  1.插槽的基本使用：<slot></slot>
  2.插槽的默认值：<slot>button<slot>
  3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
 -->
<div id="app">
  <my_con><button>按钮</button></my_con>
  <my_con><span>哈哈哈</span></my_con>
  <my_con>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </my_con>
  <my_con></my_con>
  <my_con></my_con>
</div>
 
<template id="cpnC">
  <div>
    <p>我是组件<i>我是组件，哈哈哈</i></p>
    <!-- 预备插槽 -->
    <slot><button>按钮</button></slot>
  </div>
</template>
 
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World"
    },
    components:{
      my_con: {
        template: "#cpnC"
      },
    }
  });
</script>

具名插槽　　

使用name属性对插槽进行定义，并使用 slot="" ，对指定的插槽进行调用

<div id="app">
  <my_cpn>
     
    <div slot="center">
      <span>标题</span>
    </div>
 
    <div slot="left">
      <button>按钮</button>
    </div>
  </my_cpn>
</div>
 
<template id="cpnC">
  <div>
    <slot name="left"><span>左边</span></slot>
    <slot name="center"><span>中间</span></slot>
    <slot name="right"><span>右边</span></slot>
  </div>
</template>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      message: "Hellow World"
    },
    components:{
      my_cpn:{
        template: "#cpnC"
      }
    }
  });
</script>

作用域插槽（父组件替换插槽的标签，但是内容由子组件来提供）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../Js/vue.min.js"></script>
  </head>
  <body>
    <!-- 父组件替换插槽的标签，但是内容由子组件来提供 -->
    <div id="app">
      <my_cpn></my_cpn>
 
      <my_cpn>
        <!-- <span>JavaScript-</span>
        <span>c++-</span> -->
        <!-- 目的是获取子组件中的pLanguages -->
        <template slot-scope="slot">
          <span>
            {{ slot.data.join(" - ") }}
          </span>
          <!-- <span v-for="item in slot.data">{{item}}- </span> -->
        </template>
      </my_cpn>
 
      <my_cpn>
        <!-- <span>JavaScript-</span>
        <span>c++-</span> -->
        <!-- 目的是获取子组件中的pLanguages -->
        <template slot-scope="obj">
          <span v-for="item in obj.data">{{item}}* </span>
        </template>
      </my_cpn>
    </div>
 
    <template id="cpnC">
      <div>
        <slot :data="pLanguages">
          <ul>
            <li v-for="item in pLanguages"> {{ item }} </li>
          </ul>
        </slot>
      </div>
    </template>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "Hellow World"
        },
        components: {
          my_cpn: {
            template: "#cpnC",
            data(){
              return {
                pLanguages: ["JavaScript","C++","Java","c#","Python","go","swift"],
              }
            }
          }
        }
      });
    </script>
  </body>
</html>