vue.js的

使用插槽分發內容
在封裝vue組件的時候，不少時候就不得不使用到vue的一個內置組件<slot>。slot是插槽的意思，顧名思義，這個<slot>組件的意義是預留一個區域，讓其中的DOM結構能夠由調用它的組件來渲染。

假設如今有一個people組件，結構以下：

<template>
     <div>
      <strong class="tip">*填寫的內容必須真實</strong>
      <label>姓名</label><input type="text" name="name">
      <label>性別</label><input type="text" name="sex">
      <button>肯定</button>
    </div>
</template>

當咱們註冊這個組件以後，就能夠在其餘組件中這樣子使用

<template>
    <div>
        <h3>用戶信息</h3>
        <people>
        </people>
    </div>
</template>

咱們都很清楚上面的代碼最後渲染的樣子。

<div>
    <h3>用戶信息</h3>
    <div>
      <strong class="tip">*填寫的內容必須真實</strong>
      <label>姓名</label><input type="text" name="name">
      <label>性別</label><input type="text" name="sex">
      <button>肯定</button>
    </div>
</div>

通常來講咱們這樣子封裝<people>組件是沒有問題的了。可是有時候咱們在開發中，須要的組件還須要更抽象一點。咱們試想如下，假設咱們的<people>組件的功能是獲取用戶的信息，點擊肯定上傳到服務器。若是是按照上面的方式封裝這個<people>組件，那麼咱們每次調用這個組件就只能讓用戶輸入姓名和性別。假設在另外的場景中，咱們還須要用戶輸入多一項年齡信息，那咱們的這個<people>組件就不能使用了，就還得須要另一個一個組件。<people2>。而事實上這個<people2>的組件功能邏輯徹底和<people>同樣，只是多了一項年齡信息。在這種狀況下，就至關於再寫了一個重複的組件。那有沒有辦法可讓咱們的<people>組件能夠更通用點。這時候擺在咱們面前的問題就是，能不能在調用<people>的時候，能夠指定<people>組件應該怎麼渲染?<slot>組件就是爲了解決這種問題而存在的。

咱們改變一下<people>的封裝方式：

<template>
     <div>
      <strong class="tip">*填寫的內容必須真實</strong>
     <slot>若是調用個人組件沒有傳入內容，那麼就渲染<slot>裏面的內容。</slot>
    </div>
</template>

咱們在須要由父組件來渲染的部分使用<slot>插槽，至關於佔位。這樣咱們就能夠在調用的時候，再指定這個<people>組件裏面有什麼內容：

<template>
    <div>
        <h3>用戶信息</h3>
        <people>
              <label>姓名</label><input type="text" name="name">
              <label>性別</label><input type="text" name="sex">
              <button>肯定</button>
        </people>
    </div>
</template>

渲染以後是：

<div>
    <h3>用戶信息</h3>
    <div>
      <strong class="tip">*填寫的內容必須真實</strong>
      <label>姓名</label><input type="text" name="name">
      <label>性別</label><input type="text" name="sex">
      <button>肯定</button>
    </div>
</div>

這樣子咱們的<people>組件就更爲通用了。而且當調用<people>的組件沒有指定內容的時候，<peopel>組件裏的<slot></slot>內容會渲染。以下圖。這也是vue.js<slot>插槽最基本的用法。

匿名插槽和具名插槽

除非子組件模板包含至少一個 <slot> 插口，不然父組件的內容將會被丟棄。當子組件模板只有一個沒有屬性的插槽（匿名插槽）時，父組件傳入的整個內容片斷將插入到插槽所在的 DOM 位置，並替換掉插槽標籤自己。

能夠經過爲<slot>插槽指定name（具名插槽）來指定渲染一個組件中多個插槽中的某一個。

<div>
  <slot name="slot1"></slot>
  <slot name="slot2"></slot>
</div>

調用
<people>
  <div slot="slot1">slot1的內容</div>
  <div slot="slot2">slot2的內容</div>
</people>

渲染的結果：
<div>
  <div >slot1的內容</div>
  <div >slot2的內容</div>
</div>

做用域插槽

這種特殊的插槽能夠暴露子組件中的內容,把數據交由父組件來渲染。看下面的例子：

子組件<child> 的模板
<template>
    <div>
      <slot tip='子組件內部的tip'></slot>
    </div>
</template>

父組件中調用：
<div>
    <child>
        <template slot-scope='props'>
             <!--在這裏可使用child組件暴露在slot中的數據-->
            <p>{{props.tip}}</p>
        </template>
    </child>
</div>

渲染的結果爲：
<div>
    <div>
    <p>子組件內部的tip</p>
    </div>   
</div>