vue學(xué)習(xí)筆記之作用域插槽實(shí)例分析
更新時(shí)間：2020年02月01日 12:33:44 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實(shí)例形式分析了vue.js作用域插槽基本使用方法及操作注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例講述了vue學(xué)習(xí)筆記之作用域插槽。分享給大家供大家參考，具體如下：
<child></child>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3]
}
},
template: '<div>
<ul>
<li v-for="item of list">{{item}}</li>
</ul>
</div>'
})
那么，我們要想讓父組件每一次調(diào)用子組件時(shí)再定義顯示方式，也就是說(shuō)，在子組件中定義好了v-for循環(huán)了list，具體怎么顯示，由父組件告訴我。那么在子組件中定義一個(gè)slot插槽，在父組件中添加一個(gè)作用域插槽【需要用template包裹】，在其內(nèi)寫(xiě)顯示的樣式。
父組件需要得到子組件數(shù)據(jù)時(shí)，就需要template標(biāo)簽。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中作用域插槽</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child>
<template slot-scope="props">
<li>{{props.item}}</li><!--我想渲染成列表形式-->
</template>
</child>
</div>
</body>
</html>
<script>
Vue.component('child', {
data: function () {
return {
list: [1, 2, 3]
}
},
template: '<div><ul><slot v-for="item of list" :item="item">{{item}}</slot></ul></div>'
})
var vm = new Vue({
el: '#app'
})
</script>
感興趣的朋友可以使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
Vue data的數(shù)據(jù)響應(yīng)式到底是如何實(shí)現(xiàn)的
這篇文章主要介紹了Vue data的數(shù)據(jù)響應(yīng)式到底是如何實(shí)現(xiàn)的，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
el-table樹(shù)形數(shù)據(jù)量過(guò)大,導(dǎo)致頁(yè)面卡頓問(wèn)題及解決
這篇文章主要介紹了el-table樹(shù)形數(shù)據(jù)量過(guò)大,導(dǎo)致頁(yè)面卡頓問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
VUE和Antv G6實(shí)現(xiàn)在線(xiàn)拓?fù)鋱D編輯操作
這篇文章主要介紹了VUE和Antv G6實(shí)現(xiàn)在線(xiàn)拓?fù)鋱D編輯操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue中使用geobuf的示例詳細(xì)，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式
這篇文章主要介紹了Vue如何實(shí)現(xiàn)多頁(yè)面配置以及打包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
VUE插件vue-treeselect的使用及說(shuō)明
這篇文章主要介紹了VUE插件vue-treeselect的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。2023-07-07
這篇文章主要介紹了WebPack配置vue多頁(yè)面的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-05-05
vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目中如何實(shí)現(xiàn)頁(yè)面緩存的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文主要介紹了Vue3中10多種組件通訊方法小結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06