vue學(xué)習(xí)筆記之作用域插槽實例分析
更新時間：2020年02月01日 12:33:44 作者：Rachel~Liu
這篇文章主要介紹了vue學(xué)習(xí)筆記之作用域插槽,結(jié)合實例形式分析了vue.js作用域插槽基本使用方法及操作注意事項,需要的朋友可以參考下
本文實例講述了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)用子組件時再定義顯示方式，也就是說，在子組件中定義好了v-for循環(huán)了list，具體怎么顯示，由父組件告訴我。那么在子組件中定義一個slot插槽，在父組件中添加一個作用域插槽【需要用template包裹】，在其內(nèi)寫顯示的樣式。
父組件需要得到子組件數(shù)據(jù)時，就需要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>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
相關(guān)文章
Vue data的數(shù)據(jù)響應(yīng)式到底是如何實現(xiàn)的
這篇文章主要介紹了Vue data的數(shù)據(jù)響應(yīng)式到底是如何實現(xiàn)的，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決
這篇文章主要介紹了el-table樹形數(shù)據(jù)量過大,導(dǎo)致頁面卡頓問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
這篇文章主要介紹了VUE和Antv G6實現(xiàn)在線拓撲圖編輯操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中使用geobuf的示例詳細，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了Vue如何實現(xiàn)多頁面配置以及打包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別
這篇文章主要介紹了詳談vue中router-link和傳統(tǒng)a鏈接的區(qū)別，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了VUE插件vue-treeselect的使用及說明，具有很好的參考價值，希望對大家有所幫助。2023-07-07
這篇文章主要介紹了WebPack配置vue多頁面的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue移動端項目中如何實現(xiàn)頁面緩存的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
本文主要介紹了Vue3中10多種組件通訊方法小結(jié)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06