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

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

一、內(nèi)容插槽

Vue 怎么寫

定義兩個組件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)組件渲染的時候，<slot></slot>會被替換為"這里是slot內(nèi)容"
插槽內(nèi)也可以包含任何模板代碼，包括HTML，或者是其它組件

React 怎么寫

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組件
使用場景：當(dāng)我們一個組件里需要多個插槽時

vue怎么寫

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

這時候，我們就可以使用name屬性，slot組件有一個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>

如果一個<slot>不帶name屬性的話，那么它的name默認(rèn)為default
在向具名插槽提供內(nèi)容的時候，我們可以在<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可以簡寫成#header

React 怎么寫

React還真沒有特定為這個場景定義什么方法或者屬性，不過使用props向子組件傳遞也是夠用的

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

三、作用域插槽

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

<!-- 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" 可以簡寫成 #header="slotProps"
綁定在 <slot> 元素上的特性被稱為插槽 prop。在父組件中，我們可以用v-slot 設(shè)置一個值來定義我們提供的插槽 prop 的名字，然后直接使用就好了

Emm...先寫這么多吧，等我再項目中有使用場景了再來補充，昨天看著很復(fù)雜很深奧，今天手敲了一遍代碼之后覺著這個slot API是不是有點雞肋啊，搜索了我們項目代碼并沒有發(fā)現(xiàn)有啥使用場景哎。。。