好久沒(méi)用寫(xiě)東西了，先說(shuō)幾句閑話，菠蘿同學(xué)結(jié)束了整整5年的北漂生活，收拾行囊來(lái)到了南京，開(kāi)啟人生的下一個(gè)階段，換了家國(guó)企，框架用的Vue，所以仔細(xì)學(xué)習(xí)學(xué)習(xí)啦，在此記錄記錄自己的學(xué)習(xí)過(guò)程

由于之前一直寫(xiě)React，所有在學(xué)習(xí)的過(guò)程中很自然就和react比較了起來(lái)，這樣也有好處，畢竟自己對(duì)React比較熟悉，更容易理解。但是也有壞處，React的設(shè)計(jì)真的更簡(jiǎn)潔明了啊。
今天來(lái)看Vue的Slot插槽，Slot 通俗的理解就是“占坑”，在組件模板中占好了位置，當(dāng)使用該組件標(biāo)簽時(shí)候，組件標(biāo)簽里面的內(nèi)容就會(huì)自動(dòng)填坑（替換組件模板中slot位置），這和children起到了一樣的作用，下面我們來(lái)碼碼不同場(chǎng)景下這倆框架的代碼。

一、內(nèi)容插槽

Vue 怎么寫(xiě)

定義兩個(gè)組件HelloWorld.vue、Test.vue
然后在HelloWorld.vue組件中引用Test.vue組件

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <Test>
        這里是slot內(nèi)容
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

<!--Test.vue -->
<template>
  <div>
    <h1>這里是非slot內(nèi)容</h1>
    <h2>
      <slot></slot>
    </h2>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>

當(dāng)組件渲染的時(shí)候，<slot></slot>會(huì)被替換為"這里是slot內(nèi)容"
插槽內(nèi)也可以包含任何模板代碼，包括HTML，或者是其它組件

React 怎么寫(xiě)

class HelloWorld extends Component {
  render() {
    return (
        <Test>
            這里是slot內(nèi)容
        </Test>
    )
  }
}

class Test extends Component {
  render() {
    return (
      <div>
        <h1>這里是非slot內(nèi)容</h1>
        <h2>{this.props.children}</h2>
      </div>
    );
  }
}

二、具名插槽

我理解就是有具體名字的slot組件
使用場(chǎng)景：當(dāng)我們一個(gè)組件里需要多個(gè)插槽時(shí)

vue怎么寫(xiě)

<div>
  <header>
    <!-- 我們希望把頁(yè)頭放這里 -->
  </header>
  <div class="page">
    <!-- 我們希望把頁(yè)面內(nèi)容放這里 -->
  </div>
</div>

這時(shí)候，我們就可以使用name屬性，slot組件有一個(gè)name屬性，用于命名插槽

<!--Test.vue -->
<template>
  <div>
    <h1>
      <slot name="header"></slot>
    </h1>
    <h2>
      <slot name="page"></slot>
    </h2>
  </div>
</template>

<script>
export default {
  name: 'Test',
}
</script>

如果一個(gè)<slot>不帶name屬性的話，那么它的name默認(rèn)為default
在向具名插槽提供內(nèi)容的時(shí)候，我們可以在<template>元素上使用v-slot指令，并以參數(shù)的形式提供其名稱

<!-- HelloWorld.vue -->
<template>
  <div class="hello">
    <Test>
      <template v-slot:header>
        這里是slot內(nèi)容-header
      </template>
      <template v:slot:page>
        <p>這里還是slot內(nèi)容-page</p>
      </template>
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

v-slot:header可以簡(jiǎn)寫(xiě)成#header

React 怎么寫(xiě)

React還真沒(méi)有特定為這個(gè)場(chǎng)景定義什么方法或者屬性，不過(guò)使用props向子組件傳遞也是夠用的

class HelloWorld extends Component {
  render() {
    return (
        <Test header="這里是slot內(nèi)容-header">
           這里是slot內(nèi)容-page
        </Test>
    )
  }
}

三、作用域插槽

如果你想要訪問(wèn) Test 組件中的屬性，那么可以使用作用域插槽，我沒(méi)想明白什么場(chǎng)景下會(huì)這樣用呢，如果需要訪問(wèn)子組件中的屬性，那就把內(nèi)容寫(xiě)到子組件里唄，何必要在父組件里定義呢
那如果想訪問(wèn)子組件Test的作用域該怎么辦呢？
我們把需要傳遞的內(nèi)容綁到 <slot> 上，然后在父組件中用v-slot設(shè)置一個(gè)值來(lái)定義我們提供插槽的名字，然后在HelloWorld.vue中接收傳過(guò)來(lái)的值：

<!-- Test.vue -->
<template>
  <div>
    <h1>這里是非slot內(nèi)容</h1>
    <h2>
      <slot name="header" v-bind:userInfo="user"></slot>
    </h2>
    <p>
      <slot name="page"></slot>
    </p>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    
  },
  data: () => {
    return {
      user:{
        firstName:"Fan",
        lastName:"Jun"
      }
    }
  }
}
</script>

<!--HelloWorld.vue-->
<template>
  <div class="hello">
    <Test>
      <template v-slot:header="slotProps">
        這里是slot內(nèi)容{{ slotProps.userInfo.firstName }}
      </template>
      <template #page>
        <p>這里還是slot內(nèi)容</p>
      </template>
    </Test>
  </div>
</template>

<script>
import Test from './Test';
export default {
  name: 'HelloWorld',
  components: {
    Test
  },
}
</script>

v-slot:header="slotProps" 可以簡(jiǎn)寫(xiě)成 #header="slotProps"
綁定在 <slot> 元素上的特性被稱為插槽 prop。在父組件中，我們可以用v-slot 設(shè)置一個(gè)值來(lái)定義我們提供的插槽 prop 的名字，然后直接使用就好了

Emm...先寫(xiě)這么多吧，等我再項(xiàng)目中有使用場(chǎng)景了再來(lái)補(bǔ)充，昨天看著很復(fù)雜很深?yuàn)W，今天手敲了一遍代碼之后覺(jué)著這個(gè)slot API是不是有點(diǎn)雞肋啊，搜索了我們項(xiàng)目代碼并沒(méi)有發(fā)現(xiàn)有啥使用場(chǎng)景哎。。。