快捷導(dǎo)航

vue slots 組件的組合/分發(fā)實(shí)例

更新時(shí)間：2018年09月06日 15:12:36 作者：v折耳

今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用slots 分發(fā)內(nèi)容

使用組件時(shí)常常會(huì)有組件組合使用的情況，如下：

<componentA>
<componentB></componentB>
<componentC></componentC>
</componentA>

直接套用組件的話，父級組件會(huì)將子級組件覆蓋掉，不能實(shí)現(xiàn)需求的效果，為了實(shí)現(xiàn)該效果就需要使用 slots來內(nèi)容分發(fā)

slots的使用方法如下：

<body>
 <div id="app">
 <app>
  <child></child>
  <child2></child2>
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot>沒有則顯示這個(gè)</slot>\
  <li>111</li>\
  <li>222</li>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word</div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

<app></app>標(biāo)簽沒有引入其他組件時(shí)顯示為圖1，有其他組件時(shí)顯示為圖2

同時(shí)可以實(shí)測到可以引入多個(gè)并列的組件，組件會(huì)依次顯示

但是這只能解決單個(gè) 組件的引入，實(shí)際應(yīng)用中需要多個(gè)應(yīng)用的組件會(huì)在多個(gè)位置，為了解決這個(gè)問題，就得確定slot位置的唯一性為了確定slot 的vue 中可以給slot 添加行內(nèi) name來識(shí)別，

需要注意的是：同一父級下的slot 添加行內(nèi) name必須保證唯一；

子組件下的slot 的name 是可以與父級組件的slot name 重復(fù)的，及每一級具有相對獨(dú)立性。

代碼效果圖如下：

<body>
 <div id="app">
 <app>
  <child slot="slot1">
 
  </child>
 
  <div slot="slot2">How to use slot?</div>
 
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot name="slot1">沒有則顯示這個(gè)</slot>\
  <li>111</li>\
  <li>222</li>\
  <slot name="slot2">沒有則顯示這個(gè)</slot>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word\
    <li>22222</li>\
   </div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

以上這篇vue slots 組件的組合/分發(fā)實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue.js輪播圖組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue.js輪播圖組件使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法
這篇文章主要介紹了VUE在線調(diào)用阿里Iconfont圖標(biāo)庫的方法,內(nèi)容是圍繞VUE前端和阿里Iconfont圖標(biāo)庫展開的，經(jīng)歷了從網(wǎng)站上東拼西湊圖標(biāo)的時(shí)代，大概是15~16年左右我開始解除阿里Iconfont圖標(biāo)庫，剛開始就只會(huì)下載圖標(biāo)使用，需要的朋友可以參考下
2021-10-10
vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式
這篇文章主要介紹了vue 實(shí)現(xiàn)根據(jù)data中的屬性值來設(shè)置不同的樣式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例
這篇文章主要介紹了vue+axios實(shí)現(xiàn)文件下載及vue中使用axios的實(shí)例,需要的朋友可以參考下
2018-09-09
vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝
這篇文章主要為大家詳細(xì)介紹了vue-cli3+echarts實(shí)現(xiàn)漸變色儀表盤組件封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
Vue 實(shí)現(xiàn)輪播圖功能的示例代碼
Vue是一款流行的前端框架，它提供了一系列的工具和組件，使得開發(fā)者可以更加便捷地創(chuàng)建交互式的Web應(yīng)用程序，輪播圖是Web應(yīng)用程序中常見的一種交互式組件，本文將介紹如何使用Vue和第三方組件庫 Element UI實(shí)現(xiàn)輪播圖功能,需要的朋友可以參考下
2023-05-05
Vue項(xiàng)目中使用jquery的簡單方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue實(shí)現(xiàn)目錄樹結(jié)構(gòu)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)目錄樹結(jié)構(gòu)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts）
這篇文章主要介紹了詳解Vue 項(xiàng)目中的幾個(gè)實(shí)用組件（ts），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-10-10
用Vue實(shí)現(xiàn)頁面訪問攔截的方法詳解
大家在做前端項(xiàng)目的時(shí)候,大部分頁面, 游客都可以直接訪問 , 如遇到需要登錄才能進(jìn)行的操作,頁面將提示并跳轉(zhuǎn)到登錄界面,那么如何才能實(shí)現(xiàn)頁面攔截并跳轉(zhuǎn)到對應(yīng)的登錄界面呢,本文小編就來給大家介紹一下Vue實(shí)現(xiàn)頁面訪問攔截的方法,需要的朋友可以參考下
2023-08-08