1、為什么使用slot

1.1 slot(插槽)

• 在生活中很多地方都有插槽，電腦usb的插槽，插板當(dāng)中的電源插槽
• 插槽的目的是為了讓我們?cè)瓉?lái)的設(shè)備具備更多的擴(kuò)展性
• 比如電腦的USB我們可以插入U(xiǎn)盤，手機(jī)，鼠標(biāo)，鍵盤等等
  

1.2 組件中的插槽

• 組件的插槽也是為了讓我們的組件更具有擴(kuò)展性
• 讓使用者決定組件內(nèi)部的一些內(nèi)容到底展示什么
  

1.3 例子

• 移動(dòng)開發(fā)中，幾乎每個(gè)頁(yè)面都有導(dǎo)航欄
• 導(dǎo)航欄我們必然封裝成一個(gè)插件
• 一旦有了這個(gè)組件，我們就可以在多個(gè)頁(yè)面中復(fù)用了
  

2、如何封裝這類組件（slot）

• 最好的封裝方式就是將共性抽取到組件中，將不同的部分暴露為插槽
• 一旦我們預(yù)留了插槽，就可以讓使用者根據(jù)自己的需求，決定插槽中插入什么內(nèi)容
• 是搜索框，是文字，是按鈕，由調(diào)度者自己決定
  

3、 插槽的案例

<div id="app">
  <cpn><button>按鈕</button></cpn>
  <cpn><p>hello world</p></cpn>
  <cpn><p>666</p></cpn>
</div>
<template id="cpn">
  <div>
    <h2>我是組件</h2>
    // 插槽預(yù)留的位置，方便使用者自己填寫
    <slot></slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
      }
    }
  })
</script>

上述代碼干了以下事情：

• 1.定義了子組件cpn，然后在子組件中預(yù)留了一個(gè)插槽，插槽的內(nèi)容由用戶填寫
• 2.父組件中使用了3次子組件，3個(gè)子組件分別給插槽填寫了不同的內(nèi)容

最后展示效果如下：

4、插槽默認(rèn)值

如果我們需要大量使用這個(gè)組件，而且組件預(yù)留的插槽，我們大多數(shù)都是填寫的返回按鈕，只有極少數(shù)填寫其他的，那么這種情況就可以為插槽設(shè)置一個(gè)默認(rèn)值

<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <slot><button>返回</button></slot>
  </div>
</template>

我們?cè)谧咏M件中設(shè)置了一個(gè)默認(rèn)值為返回按鈕的插槽，那么父組件在使用時(shí)如果不填寫任何內(nèi)容，那么默認(rèn)就是返回按鈕

5、具名插槽

有時(shí)我們需要多個(gè)插槽。例如對(duì)于一個(gè)帶有如下模板的組件：

<template id="cpn">
  <div>
    <slot name="header"><span>頭部</span></slot>
    <slot name="main"><span>中間</span></slot>
    <slot name="footer"><span>頁(yè)腳</span></slot>
  </div>
</template>

我們?cè)诮M件中預(yù)留了3個(gè)插槽，但是這里指定了3個(gè)名字，后續(xù)父組件使用v-slot指定name屬性后就能填寫自己的內(nèi)容，比如如下代碼

<div id="app">
  <cpn>
    <template v-slot:header>
      <p>header頭部</p>
    </template>
    <template v-slot:footer>
      <p>footer頁(yè)腳</p>
    </template>
  </cpn>
</div>

使用了cpn組件，然后指定了插槽name屬性為header和footer的內(nèi)容，指定后自己填寫的內(nèi)容就會(huì)替換默認(rèn)的內(nèi)容。

注意：這里的語(yǔ)法格式是固定的，必須在使用template標(biāo)簽上綁定v-slot:插槽的名字

6、編譯作用域

通過(guò)外面?zhèn)鹘o組件的變量，在以后使用插槽的時(shí)候是不能使用的

<div id="app">
  <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
  <p>hello</p>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      isShow: true
    },
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            isShow: false
          }
        }
      }
    }
  })
</script>

上面我們定義了子組件cpn，子組件中有屬性isShow，app實(shí)例中也定義了屬性isShow，最后使用子組件cpn時(shí)使用了v-show，當(dāng)值為true顯示，值為false不顯示
問(wèn)題：v-show中的isShow的值是實(shí)例中的true還是子組件中的false
答案：是true，因?yàn)槟闶褂玫臅r(shí)候是在app實(shí)例范圍內(nèi)，所以isShow會(huì)去從實(shí)例中的data去查找，雖然你是在cpn子組件中綁定的，但是這里的cpn你只需要把他當(dāng)做普通的標(biāo)簽即可，如果你想讓isShow的值為false，那么你只需要在子組件的template模板中使用<p v-show="isShow">hello</p>


7、作用域插槽

默認(rèn)在插槽中的代碼只能使用全局Vue中的屬性，如果想要使用自定義組件中的屬性，那么需要在定義slot的時(shí)候使用v-bind來(lái)進(jìn)行綁定。

<div id="app">
  <cpn>
    <template v-slot:default="slot">
      {{slot.data.firstName}}
    </template>
  </cpn>
</div>
<template id="cpn">
  <div>
    <slot :data="user">
      {{user.lastname}}
    </slot>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    components: {
      "cpn": {
        template: `#cpn`,
        data(){
          return{
            "user": {
              "firstName": "甲",
              "lastname": "殼蟲"
            }
          }
        }
      }
    }
  })
</script>

上述代碼做了如下幾件事情:

• 1.定義了子組件cpn，在子組件中定義了user
• 2.在子組件cpn的模板的插槽中綁定了屬性data，且插槽的默認(rèn)值為user.lastname

• 3.在html中使用了子組件，并使用v-slot綁定了插槽Prop對(duì)象，這樣就可以通過(guò)對(duì)象名稱.子組件中綁定的屬性名稱(slot.data)，來(lái)訪問(wèn)子組件中的數(shù)據(jù)

到此這篇關(guān)于Vue slot插槽的使用詳情的文章就介紹到這了,更多相關(guān)Vue slot插槽的使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論