如何理解Vue的作用域插槽的實(shí)現(xiàn)原理
更新時(shí)間：2017年08月19日 18:39:23 作者：洪定倫
本篇文章主要介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了如何理解Vue的作用域插槽的實(shí)現(xiàn)原理，分享給大家，也給自己留個(gè)筆記
舉個(gè)例子，比如我寫(xiě)了一個(gè)可以實(shí)現(xiàn)條紋相間的列表組件，發(fā)布后，使用者可以自定義每一行的內(nèi)容或樣式（普通的slot就可以完成這個(gè)工作）。而作用域插槽的關(guān)鍵之處就在于，父組件能接收來(lái)自子組件的slot傳遞過(guò)來(lái)的參數(shù)，具體看案例和注釋。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue作用域插槽</title>
<script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
</head>
<body>
<div id="app2">
<my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
<!-- props對(duì)象接收來(lái)自子組件slot的$index參數(shù) -->
<template slot="cont" scope="props">
<span>{{users[props.$index].id}}</span>
<span>{{users[props.$index].name}}</span>
<span>{{users[props.$index].age}}</span>
<!-- 這里可以自定[編輯][刪除]按鈕的鏈接和樣式 -->
<a :href="'#edit/id/'+users[props.$index].id" rel="external nofollow" >編輯</a>
<a :href="'#del/id/'+users[props.$index].id" rel="external nofollow" >刪除</a>
</template>
</my-stripe-list>
</div>
<script>
Vue.component('my-stripe-list', {
/*slot的$index可以傳遞到父組件中*/
template: `
<div>
<div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
<slot name="cont" :$index="index"></slot>
</div>
</div>
`,
props: {
items: Array,
oddBgcolor: String,
evenBgcolor: String
}
});
new Vue({
el: '#app2',
data: {
users: [
{id: 1, name: '張三', age: 20},
{id: 2, name: '李四', age: 22},
{id: 3, name: '王五', age: 27},
{id: 4, name: '張龍', age: 27},
{id: 5, name: '趙虎', age: 27}
]
}
});
</script>
</body>
</html>
效果如下：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)圖書(shū)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖書(shū)管理系統(tǒng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問(wèn)題
這篇文章主要介紹了Vue動(dòng)態(tài)獲取數(shù)據(jù)后控件不可編輯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vuex在vite&vue3中的簡(jiǎn)單使用說(shuō)明
這篇文章主要介紹了vuex在vite&vue3中的簡(jiǎn)單使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解
這篇文章主要介紹了Vue3.0版本強(qiáng)勢(shì)升級(jí)點(diǎn)特性詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2022-06-06
這篇文章主要介紹了基于vue的驗(yàn)證碼組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01
VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁(yè)面同時(shí)更新的實(shí)現(xiàn)方法
這篇文章主要介紹了VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁(yè)面同時(shí)更新的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解
這篇文章主要介紹了啟動(dòng)myvue報(bào)錯(cuò)npm?ERR!?code?ENOENT?npm?ERR!?syscall?open的解決辦法,文中給出了詳細(xì)的解決方法,并通過(guò)圖文結(jié)合的方式介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個(gè)簡(jiǎn)單登錄頁(yè)面的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Ant Design Vue全局對(duì)話(huà)確認(rèn)框(confirm)的回調(diào)不觸發(fā)
這篇文章主要介紹了Ant Design Vue全局對(duì)話(huà)確認(rèn)框(confirm)的回調(diào)不觸發(fā)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性示例詳解
在el-form中正確使用rules校驗(yàn)是非常重要的,rules使用不當(dāng)容易出現(xiàn)規(guī)則不生效、規(guī)則一直被觸發(fā)等各種現(xiàn)象,這篇文章主要給大家介紹了關(guān)于Vue3表單組件el-form校驗(yàn)規(guī)則rules屬性的相關(guān)資料,需要的朋友可以參考下2024-08-08