1.為什么需要使用slot
- 我們自定義的組件往往需要在很多不同的頁面中使用，而且在不同的頁面中使用時，組件也不是一成不變的，而是同一組件在不同地方使用時展示的內容也稍有不同，
- 要實作以上需求就不能在定義組件時把展示的內容寫死，而是在組件中定義出插槽，當我們在使用組件再決定組件具體需要展示哪些內容，
- 一般在定義組件時，我們將共性的內容寫死在組件中，而可能改變的內容封裝為插槽，
2.slot的基本使用
- 在定義子組件時，將不確定的內容抽取為slot，
<template id="script_template"> <div> <h3>我是子組件</h3> <!--使用slot標簽設定一個插槽，其內可以放置內容作為組件的默認值--> <slot><h3>我是默認值</h3></slot> </div> </template> - 在使用子組件時，決定slot插槽的內容
<div id="app1"> <!--使用組件時如果標簽內放置了內容，則會將該內容替換為子組件中slot標簽中的內容，如使用時 不放置內容，則會使用子組件中slot標簽中的默認內容 --> <mycpnc></mycpnc> <mycpnc><h3>我是哈哈哈</h3></mycpnc> </div>
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app1">
<!--使用組件-->
<mycpnc></mycpnc>
<mycpnc><h3>我是哈哈哈</h3></mycpnc>
</div>
<template id="script_template">
<div>
<h3>我是子組件</h3>
<slot><h3>我是默認值</h3></slot>
</div>
</template>
<!--引入本地的vue.js檔案-->
<script src="../vue.js"></script>
<script>
let app = new Vue({
el: '#app1', // 講這個vue實體與id為app1的標簽關聯起來
//使用語法糖方式注冊區域組件
components: {
'mycpnc':{
template: '#script_template'
}
}
})
</script>
</body>
</html>
效果如下：
3.slot具名插槽的使用
當我們在定義子組件時，如果設定了多個slot插槽，那么再使用時就會有一個問題：如何設定每個插槽的值呢？這就需要用到我們的具名插槽了，
具名插槽的使用步驟：
- 在定義子組件時，將不確定的內容抽取為slot，并給slot標簽設定name屬性，
<template id="script_template"> <div> <slot name="above"><h3>上面</h3></slot> <slot name="intermediate"><h3>中間</h3></slot> <slot name="follow"><h3>下面</h3></slot> </div> </template> - 在使用子組件時，決定slot插槽的內容，
<div id="app1"> <!--使用組件--> <mycpnc> <!--給標簽設定slot屬性，程式會根據slot屬性的值找到對應的slot標簽--> <h3 slot="follow">嘿嘿嘿</h3> <h3 slot="intermediate">嘻嘻嘻</h3> </mycpnc> </div>
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app1">
<!--使用組件-->
<h1>第一個插槽</h1>
<mycpnc></mycpnc>
<h1>第二個插槽</h1>
<mycpnc><h3 slot="above">哈哈哈</h3></mycpnc>
<h1>第三個插槽</h1>
<mycpnc>
<h3 slot="follow">嘿嘿嘿</h3>
<h3 slot="intermediate">嘻嘻嘻</h3>
</mycpnc>
</div>
<template id="script_template">
<div>
<slot name="above"><h3>上面</h3></slot>
<slot name="intermediate"><h3>中間</h3></slot>
<slot name="follow"><h3>下面</h3></slot>
</div>
</template>
<!--引入本地的vue.js檔案-->
<script src="../vue.js"></script>
<script>
let app = new Vue({
el: '#app1', // 講這個vue實體與id為app1的標簽關聯起來
//使用語法糖方式注冊區域組件
components: {
'mycpnc':{
template: '#script_template'
}
}
})
</script>
</body>
</html>
效果如下：
4.slot作用域插槽的使用
（1）什么是編譯作用域
（2）作用域插槽的使用
- 作用域插槽可以簡單理解為
我們在使用子組件時，如果需要使用子組件中的資料來設定子組件中slot插槽的內容，那么就需要使用作用域插槽了， - 作用域插槽的本質是：
- 1.在定義子組件插槽時，給
slot標簽設定自定義屬性(dmsg)，并使用v-on將屬性值系結為子組件的資料， - 2.在使用子組件并設定插槽具體內容時，可以使用
slot-scope="myslot"將子組件的slot物件傳遞給變數myslot， - 3.在父組件中就可以使用
myslot.dmsg來獲取子組件的資料
- 1.在定義子組件插槽時，給
作用域插槽的使用步驟：
- 在定義子組件時，將不確定的內容抽取為slot，并給slot標簽設定一個屬性，使用v-on將屬性值系結為子組件中的資料
<template id="script_template"> <div> <!--將子組件的message資料系結到slot標簽的dmsg屬性中--> <!--不一定必須是dmsg屬性，也可以使用其他自定義的屬性值--> <slot :dmsg="message" name="aaa"> <h3>我是默認值</h3> </slot> </div> </template> - 在使用子組件，決定slot插槽的內容時，可以使用
slot-scope="myslot"來獲取子組件中的slot物件，<div id="app1"> <!--使用組件--> <mycpnc> <!--在vue2.5之前的版本必須用template標簽來獲取子組件物件，2.5以后也可以使用div等標簽--> <!--slot-scope="myslot"，將aaa插槽物件傳遞給了myslot變數--> <template slot-scope="myslot" slot="aaa"> <h3>{{myslot.dmsg}}</h3> </template> </mycpnc> </div>
案例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app1">
<!--使用組件-->
<mycpnc>
<template slot-scope="myslot" slot="aaa">
<h3>{{myslot.dmsg}}</h3>
</template>
</mycpnc>
<mycpnc></mycpnc>
</div>
<template id="script_template">
<div>
<slot :dmsg="message" name="aaa">
<h3>我是默認值</h3>
</slot>
</div>
</template>
<!--引入本地的vue.js檔案-->
<script src="../vue.js"></script>
<script>
let app = new Vue({
el: '#app1', // 講這個vue實體與id為app1的標簽關聯起來
//使用語法糖方式注冊區域組件
components: {
'mycpnc':{
template: '#script_template',
data:function(){
return {
message: '哈哈哈'
}
}
}
}
})
</script>
</body>
</html>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/287371.html
標籤：其他
下一篇：Omega全實時資料處理架構介紹