https://www.bilibili.com/video/BV15741177Eh?p=69&spm_id_from=pageDriver
slot翻譯為插槽：
在生活中很多地方都有插槽，電腦的USB插槽，插板當(dāng)中的電源插槽。
插槽的目的是讓我們?cè)瓉?lái)的設(shè)備具備更多的擴(kuò)展性。
比如電腦的USB我們可以插入U(xiǎn)盤、硬盤、手機(jī)、音響、鍵盤、鼠標(biāo)等等。
組件的插槽：
組件的插槽也是為了讓我們封裝的組件更加具有擴(kuò)展性。
讓使用者可以決定組件內(nèi)部的一些內(nèi)容到底展示什么。
栗子：移動(dòng)網(wǎng)站中的導(dǎo)航欄。
移動(dòng)開發(fā)中，幾乎每個(gè)頁(yè)面都有導(dǎo)航欄。
導(dǎo)航欄我們必然會(huì)封裝成一個(gè)插件，比如nav-bar組件。
一旦有了這個(gè)組件，我們就可以在多個(gè)頁(yè)面中復(fù)用了。
但是，每個(gè)頁(yè)面的導(dǎo)航是一樣的嗎？No，我以京東M站為例

image.png

如何去封裝這類的組件呢？
它們也很多區(qū)別，但是也有很多共性。
如果，我們每一個(gè)單獨(dú)去封裝一個(gè)組件，顯然不合適：比如每個(gè)頁(yè)面都返回，這部分內(nèi)容我們就要重復(fù)去封裝。
但是，如果我們封裝成一個(gè)，好像也不合理：有些左側(cè)是菜單，有些是返回，有些中間是搜索，有些是文字，等等。
如何封裝合適呢？抽取共性，保留不同。
最好的封裝方式就是將共性抽取到組件中，將不同暴露為插槽。
一旦我們預(yù)留了插槽，就可以讓使用者根據(jù)自己的需求，決定插槽中插入什么內(nèi)容。
是搜索框，還是文字，還是菜單。由調(diào)用者自己來(lái)決定。
這就是為什么我們要學(xué)習(xí)組件中的插槽slot的原因。

<!--
1.插槽的基本使用 <slot></slot>
2.插槽的默認(rèn)值 <slot>button</slot>
3.如果有多個(gè)值, 同時(shí)放入到組件進(jìn)行替換時(shí), 一起作為替換元素
-->

<div id="app">
  <cpn></cpn>

  <cpn><span>哈哈哈</span></cpn>
  <cpn><i>呵呵呵</i></cpn>
  <cpn>
    <i>呵呵呵</i>
    <div>我是div元素</div>
    <p>我是p元素</p>
  </cpn>

  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>


<template id="cpn">
  <div>
    <h2>我是組件</h2>
    <p>我是組件, 哈哈哈</p>
    <slot><button>按鈕</button></slot>
    <!--<button>按鈕</button>-->
  </div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      cpn: {
        template: '#cpn'
      }
    }
  })
</script>