這篇文章將為大家詳細(xì)講解有關(guān)Vue.js分發(fā)之作用域槽的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標(biāo)志設(shè)計、營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)公司、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及網(wǎng)站建設(shè)維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都水處理設(shè)備行業(yè)客戶提供了網(wǎng)站營銷服務(wù)。

首先，需要知道的是，每個組件有每個組件自己的作用域。每個組件都是Vue()的實例，有自己的作用域。

比如現(xiàn)在有個組件這樣的：

Vue.component('father-component1',{
  template:'<div class="father"><p>Hi,我是父組件</p>{{fatherMessage}}</div>',
  data:function(){
   return {
     fatherMessage:'這是父組件發(fā)出的消息哦~'
   }
  },
});

這個data只為template里的模板服務(wù)。同樣的，子組件的data只為子組件的模板服務(wù)。因為他們都是各自作用域內(nèi)的屬性。

在slot分發(fā)中，無論是單分發(fā)還是具名分發(fā)，都是父組件替換子組件的數(shù)據(jù)，或者沒有替換，用子組件默認(rèn)的數(shù)據(jù)。兩者并不能共存。這樣他們就沒有數(shù)據(jù)聯(lián)系了。

但是通過設(shè)置作用域槽，就可以改變這種狀況，讓子組件可以在父組件進(jìn)行分發(fā)時獲取自己的數(shù)據(jù)，至于是什么數(shù)據(jù)，由子組件決定，這樣就能解耦了。

作用域槽通過slot的一個自定義的屬性，官方給出的DEMO是text，但也可以是其他，值為暴露的數(shù)據(jù)。

這個自定義屬性已經(jīng)存放在子組件的prop對象里了。等待著被父組件獲取。

怎么獲取呢？

在父組件的模板里，使用一個Vue自帶的特殊組件<template> ，并在該組件上使用scope屬性，值是一個臨時的變量，存著的是由子組件傳過來的prop對象，在下面的例子中我把他命名為props。

獲得由子傳過來的prop對象。這時候，父組件就可以訪問子組件在自定義屬性上暴露的數(shù)據(jù)了。

//js
Vue.component('child-component4',{
  template:'<ul>' +
  '<slot name="child-ul" v-for="item in fruit" v-bind:text="item.name">?</slot>' +
  '</ul>',
  data:function(){
   return {
     fruit:[
       {name:'蘋果'},
       {name:'香蕉'},
       {name:'橙子'}
     ]
   }
  },
});
Vue.component('father-component4',{
  template:'<child-component4>' +
  '<template scope="props" slot="child-ul">' +
  '<li class="child-li" >{{props.text}}</li>' +
  '</template>' +
  '</child-component4>'
});
var app16 = new Vue({
  el:'#app16'
});
<div id="app16">
  <father-component4></father-component4>
</div>

以上的的組件組合會被渲染為：

<div id="app16">
<ul>
  <li class="child-li">蘋果</li>
  <li class="child-li">香蕉</li>
  <li class="child-li">橙子</li>
</ul>
</div>

關(guān)于“Vue.js分發(fā)之作用域槽的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.chinadenli.net，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享標(biāo)題：Vue.js分發(fā)之作用域槽的示例分析-創(chuàng)新互聯(lián)
當(dāng)前網(wǎng)址：http://www.chinadenli.net/article32/dgecsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、虛擬主機(jī)、企業(yè)網(wǎng)站制作、全網(wǎng)營銷推廣、關(guān)鍵詞優(yōu)化、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)