插槽slot

slot 一個預留的空間

<slot></slot>

如何封裝這類組件呢？

• 抽取共性，保留不同。

1. 最好的封裝方式就是將共性抽取到組件中，將不同暴露爲插槽
2. 一旦我們預留了插槽，就可以讓使用者根據自己的需求，決定插槽中插入什麼內容
3. 是搜索框，是文字，還是菜單。由調用者自己來決定

  <template id="cpn">
    <div>
      <h2>我是組件</h2>
      <p>我是組件2</p>
      <slot></slot>
    </div>

這樣這個slot就是留的位置了

  <div id="app">
    <cpn><button>按鈕</button></cpn>
    <cpn><span>哈哈哈</span></cpn>
  </div>

• 在實例中直接在裏邊寫入button 和span
  

插槽的第二種用法：設置默認值

<slot><button>給插槽設置默認值</button></slot>

• 在沒有設置的情況下，默認值爲button
  
• 如果在插槽中有多個值，將一起作爲替換元素

具名插槽

  <template id="cpn">
    <div>
      <slot name="left"><button>按鈕</button></slot>
      <slot name="center"><span>哈哈</span></slot>
      <slot name="right"><input type="text"></slot>
    </div>
  </template>

• 給插槽設置name，調取時候將要替換的元素設置slot屬性

<div id="app">
    <cpn><span slot="left">替換</span></cpn>
  </div>

編譯作用域

<div id="app">
    <cpn v-show='' v-for=(item in names)></cpn>
</div>

<template id="cpn">
    <div>
      <h2>我是子組件</h2>
      <p>我是內容</p>
      <button v-show='' v-for=''>anniu </button>
    </div>
  </template>

• 在哪裏就用哪裏的域

插槽作用域

• 父組件替換插槽的標籤，子組件提供插槽的內容
  

//子組件
data(){
            return {
              pLanguage:['java','javaScript','c++','python']
            }
          }

-子組件模板

<template id="cpn">
    <div>
      <slot :data="pLanguage">
        <ul>
          <li v-for="item in pLanguage">{{item}}</li>
        </ul>
      </slot>
    </div>
  </template>

-用一對slot動態綁定一個屬性，然後再父組件裏用slot-scope傳值就可以使用了

父組件

<div id="app">
   <cpn>
     <template slot-scope="dataApp">
       <span v-for="item in dataApp.data">{{item}} </span>
     </template>
   </cpn>
 </div>