首先，需要知道的是，每個(gè)組件有每個(gè)組件自己的作用域。每個(gè)組件都是Vue()的實(shí)例，有自己的作用域。
比如現(xiàn)在有個(gè)組件這樣的：
Vue.component('father-component1',{ template:'<div class="father"><p>Hi,我是父組件</p>{{fatherMessage}}</div>', data:function(){ return { fatherMessage:'這是父組件發(fā)出的消息哦~' } },});這個(gè)data只為template里的模板服務(wù)。同樣的，子組件的data只為子組件的模板服務(wù)。因?yàn)樗麄兌际歉髯宰饔糜騼?nèi)的屬性。
在slot分發(fā)中，無論是單分發(fā)還是具名分發(fā)，都是父組件替換子組件的數(shù)據(jù)，或者沒有替換，用子組件默認(rèn)的數(shù)據(jù)。兩者并不能共存。這樣他們就沒有數(shù)據(jù)聯(lián)系了。
但是通過設(shè)置作用域槽，就可以改變這種狀況，讓子組件可以在父組件進(jìn)行分發(fā)時(shí)獲取自己的數(shù)據(jù)，至于是什么數(shù)據(jù)，由子組件決定，這樣就能解耦了。
作用域槽通過slot的一個(gè)自定義的屬性，官方給出的DEMO是text，但也可以是其他，值為暴露的數(shù)據(jù)。
這個(gè)自定義屬性已經(jīng)存放在子組件的prop對象里了。等待著被父組件獲取。
怎么獲取呢？
在父組件的模板里，使用一個(gè)Vue自帶的特殊組件<template> ，并在該組件上使用scope屬性，值是一個(gè)臨時(shí)的變量，存著的是由子組件傳過來的prop對象，在下面的例子中我把他命名為props。
獲得由子傳過來的prop對象。這時(shí)候，父組件就可以訪問子組件在自定義屬性上暴露的數(shù)據(jù)了。
//jsVue.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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
