詳解Vue.js分發(fā)之作用域槽
首先，需要知道的是，每個(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對(duì)象里了。等待著被父組件獲取。
怎么獲取呢？
在父組件的模板里，使用一個(gè)Vue自帶的特殊組件<template> ，并在該組件上使用scope屬性，值是一個(gè)臨時(shí)的變量，存著的是由子組件傳過來的prop對(duì)象，在下面的例子中我把他命名為props。
獲得由子傳過來的prop對(duì)象。這時(shí)候，父組件就可以訪問子組件在自定義屬性上暴露的數(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>
以上的的組件組合會(huì)被渲染為：
<div id="app16"> <ul> <li class="child-li">蘋果</li> <li class="child-li">香蕉</li> <li class="child-li">橙子</li> </ul> </div>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue之Axios的異步通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念，下面這篇文章主要給大家介紹了關(guān)于Vue CLI中模式與環(huán)境變量的相關(guān)資料，需要的朋友可以參考下2021-05-05
解決vue組件中使用v-for出現(xiàn)告警問題及v for指令介紹
這篇文章主要介紹了解決vue組件中使用v-for出現(xiàn)告警問題,在文中給大家介紹了v for指令，需要的朋友可以參考下2017-11-11
Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例
下面小編就為大家分享一篇Vue-cli項(xiàng)目獲取本地json文件數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue使用video插件vue-video-player的示例
這篇文章主要介紹了vue使用video插件vue-video-player的示例，幫助大家更好的理解和使用vue插件，感興趣的朋友可以了解下2020-10-10
vue生命周期四個(gè)階段created和mount詳解
這篇文章主要介紹了vue生命周期四個(gè)階段created和mount,本文給大家介紹的非常詳細(xì),補(bǔ)充介紹了什么是實(shí)例,什么是實(shí)例被掛載到DOM,什么是dom,dao操作又是什么,感興趣的朋友跟隨小編一起看看吧2024-02-02
這篇文章主要介紹了Vue如何更改表格中的某一行選項(xiàng)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
實(shí)際項(xiàng)目中偶爾會(huì)遇到給項(xiàng)目頁面背景加水印的需求,這篇文章主要為大家介紹了Vue使用canvas實(shí)現(xiàn)水印功能的示例代碼，希望對(duì)大家有所幫助2023-07-07
手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟
身為入行未深的小白前端,不斷的學(xué)習(xí)是我們不可丟失的習(xí)慣,前端流行的框架也是層出不窮,vue在眾多框架中脫穎而出,下面這篇文章主要給大家介紹了關(guān)于搭建一個(gè)vue項(xiàng)目的完整步驟,需要的朋友可以參考下2022-07-07