slot插槽的基本使用

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

介紹：
默認(rèn)自定義標(biāo)簽內(nèi)不允許添加內(nèi)容，而插槽可以讓我們在內(nèi)部添加內(nèi)容

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

使用方法：

直接在template中插入slot空標(biāo)簽，即可在自定義標(biāo)簽中插入內(nèi)容，內(nèi)容會自動替換空slot

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

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

如果在slot中添加默認(rèn)值，組件標(biāo)簽中沒有插入內(nèi)容則顯示默認(rèn)值

<slot><b>默認(rèn)顯示我</b></slot>

具名插槽slot

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

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

編譯作用域

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

通俗點(diǎn)講：看標(biāo)簽的父組件，標(biāo)簽是在父組件中實(shí)現(xiàn)的，
那么作用域就是父組件，屬性也是父組件的屬性

<div id="app">
  //它的父組件是vue實(shí)例，所以屬性也是vue實(shí)例中的屬性，和自定義組件無關(guān)
  <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>

插槽作用域

在當(dāng)前作用域中的插槽中，只能引用當(dāng)前組件的data。

如何在父組件中拿到子組件的數(shù)據(jù)？

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

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

在Vue實(shí)例中通過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>

插槽高級技巧

我們都知道當(dāng)使用插槽時，自定義標(biāo)簽中的內(nèi)容會替換插槽。但我們想要給插槽設(shè)置樣式該怎么做呢?

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

<template id="cpn">
  <div>
    <!-- 在組件data中動態(tài)設(shè)置class -->
    <div :class="{active:isActive}">
      <slot></slot>
    </div>
  </div>
</template>
```****

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。