slot插槽的基本使用

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

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

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

使用方法：

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

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

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

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

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

具名插槽slot

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

	<cpn>
		<span slot='mysolt'>我替換了myslot</span>
	</cpn>
	<slot name='myslot'>myslot</slot>
	<slot name='newslot'>newslot</slot>

編譯作用域

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

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

<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。

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

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

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

在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>
```****

總結

以上是生活随笔為你收集整理的Vue组件化之插槽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。