Vue組件化之插槽

slot插槽的基本使用

類似電腦的usb，使用接口給電腦增加不同的功能，鍵盤/音響，而不是直接在組件里添加

介紹：
默認自定義標簽內不允許添加內容，而插槽可以讓我們在內部添加內容

封裝方法：
抽取共性，保留不同。

使用方法：

1. 直接在template中插入slot空標簽，即可在自定義標簽中插入內容，內容會自動替換空slot

   <template>
     <div>
       <slot></slot>
     </div>
   </template>
   

2. 組件標簽中插入的無論插入多少值，都會一起作為替換元素替換slot

3. 如果在slot中添加默認值，組件標簽中沒有插入內容則顯示默認值

   <slot><b>默認顯示我</b></slot>
   

具名插槽slot

當有多個插槽時，我們只想替換其中一個，就需要用到具名插槽了

// cpn.vue
<slot name='myslot'>myslot</slot>
<slot name='newslot'>newslot</slot>	

//app.vue
<cpn>
  替換方式一：<span slot='mysolt'>我替換了myslot</span>
  替換方式二：
  <template v-slot:newslot>
    <span>我替換了newslot</span>
  </template>
</cpn>

編譯作用域

父組件模板的所有東西都會在父級作用域內編譯；
子組件模板的所有東西都會在子級作用域內編譯。

通俗點講：看標簽的父組件，標簽是在父組件中實現的，
那么作用域就是父組件，屬性也是父組件的屬性

<div id="app">
  //它的父組件是vue實例，所以屬性也是vue實例中的屬性，和自定義組件無關
  <cpn v-show="isShow"></cpn>		//isShow=true
</div>

<script>
  const app = new Vue({
    el:'#app',
    data:{
      isShow:true,
    },
    components:{
      cpn:{
        template:'#cpn',
        data(){
          return{
            isShow:false,
          }
        }
      },

    }
  })
</script>

插槽作用域

在當前作用域中的插槽中，只能引用當前組件的data。

如何在父組件中拿到子組件的數據？

1. 首先在slot中命名接收屬性的key（如newdata），並動態綁定子組件data

   //子組件cpn
   <template id="cpn">
     <div>
       <slot :newdata="msg"></slot>
     </div>
   </template>
   

2. 在Vue實例中通過template接收(兩種方式)

• 通過v-slot接收 (建議用v-slot)

  //父
  <cpn>
    <template v-slot={newdata}>
      <h2>{{newdata}}</h2>
    </template>
  </cpn>
  

• 通過slot-scope接收

  //父
  <cpn>
    <template slot-scope=newname>
      <h2>{{newname.newdata}}</h2>
    </template>
  </scpn>
  

插槽高級技巧

我們都知道當使用插槽時，自定義標簽中的內容會替換插槽。但我們想要給插槽設置樣式該怎么做呢?

使用div包裹插槽，給div設置樣式，利用cs繼承特性，被替換的插槽也就有了樣式

<template id="cpn">
  <div>
    <!-- 在組件data中動態設置class -->
    <div :class="{active:isActive}">
      <slot></slot>
    </div>
  </div>
</template>