需求
上一篇章,我們講解了Vue中插槽的基本使用方法,本篇章來講解作用域查看的情況。這是一種什麼情況呢?
簡單來說就是使用 v-for
渲染插槽的數據傳遞情況,下面來具體示例說明一下。
示例說明
首先編寫一個基礎的代碼,編寫好一個子組件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中作用域插槽slot</title>
<!-- 1.導入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 2.創建app -->
<div id="app">
<child></child>
</div>
<!-- 3.創建vm -->
<script>
Vue.component("child", {
template: `<div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
在上面的代碼中,子組件中的 ul
使用 v-for
遍歷了一個 li
的結構,頁面效果如下:
看到了這個結構之後,我們就可以理所當然地提出一個關於插槽方面的需求了。
作用域插槽的需求
如果我們想要遍歷的並不是簡單的 li
結構,而是希望在父元素編寫來形成的 dom
結構,但是又需要從子組件中的數據來遍歷。
那麼如何將子組件的 data
數組傳遞到 父組件,然後讓父組件來遍歷編寫 dom
結構呢?
作用域插槽的實現
第一步,首先將子組件的數據綁定到插槽 slot 的屬性上
Vue.component("child", {
template: `<div>
<ul>
<slot v-for="item in list" v-bind:item="item"></slot>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
第二步,使用 template 便籤渲染 slot 插槽
<child>
<template slot-scope="props">
<li>{{props.item}} -- hello</li>
</template>
</child>
注意:
- 必須使用
template
標籤編寫 - 使用
slot-scope="props"
可以接收子組件綁定的數據
瀏覽頁面效果如下:
那麼此時遍歷的效果就取決於父組件了。
作用域插槽的 vue 2.6 更新寫法
上面已經基本實現了作用域插槽的基本使用,但是在 vue 2.6
版本開始,通過 slot-scope
的屬性方式獲取 props
值將會被逐步廢棄。
更新的寫法如下:
<template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
v-slot
綁定一個 slot 的命名 name,並且綁定子組件設置的參數。其中 default 爲默認的 slot 命名
修改一下上面的代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue中作用域插槽slot</title>
<!-- 1.導入vue.js -->
<script src="lib/vue.js"></script>
</head>
<body>
<!-- 2.創建app -->
<div id="app">
<child>
<template v-slot:default="props">
<li>{{props.item}} -- hello</li>
</template>
</child>
</div>
<!-- 3.創建vm -->
<script>
Vue.component("child", {
template: `<div>
<ul>
<slot v-for="item in list" v-bind:item="item"></slot>
</ul>
</div>`,
data(){
return {
list: [1,2,3,4,5,6]
}
},
});
let vm = new Vue({
el: "#app",
data: {},
})
</script>
</body>
</html>
更多精彩原創Devops文章,快來關注我的公衆號:【Devops社羣】 吧: