在前期博文《Vue進階(幺貳柒):Vue插槽》中主要講解了Vue中插槽的基礎用法,此篇博文接下來講解高版本下通過v-slot
指令如何應用Vue插槽及與slot
、slot-scope
的用法區別。
demo
不具名插槽
<body>
<div id="app">
<Test>
<div>slot插槽佔位內容</div>
</Test>
</div>
<template id="test">
<div>
<slot></slot>//定義插槽
<h3>這裏是test組件</h3>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app",
})
</script>
具名插槽
<body>
<div id="app">
<Test>
<div slot="header">這裏是頭部</div>//具名插槽使用
<div slot="footer">這裏是尾部</div>
</Test>
</div>
<template id="test">
<div>
<slot name="header"></slot>//具名插槽
<h3>這裏是Test組件</h3>
<slot name="footer"></slot>
</div>
</template>
</body>
<script>
Vue.component(
'Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
v-slot
v-slot
在組件中使用slot進行佔位時,也是在slot標籤內使用name 屬性給slot插槽定義一個名字。但是在html內使用時就有些不同了。需要使用template模板標籤,template標籤內,使用v-slot指令綁定插槽名,標籤內寫入需要添加的內容。
<body>
<div id="app">
<Test>
<template v-slot:header>//v-slot指令使用插槽
<h2>slot頭部內容</h2>
</template>
<p>直接插入組件的內容</p>
<template v-slot:footer>
<h2>slot尾部內容</h2>
</template>
</Test>
</div>
<template id ='test'>
<div class="container">
<header>
<!-- 我們希望把頁頭放這裏 -->
<slot name = "header"></slot>//具名插槽
</header>
<section>
主體內容部分
</section>
<footer>
<!-- 我們希望把頁腳放這裏 -->
<slot name = 'footer'></slot>
</footer>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test"
});
new Vue({
el:"#app"
})
</script>
作用域插槽:
slot-scope使用:
-
在組件模板中書寫所需slot插槽,並將當前組件的數據通過v-bind綁定在slot標籤上。
-
在組件使用時,通過slot-scope=“scope”,接收組件中slot標籤上綁定的數據。
-
通過scope.xxx就可以使用綁定數據了
<body>
<div id="app">
<Test>
<div slot="default" slot-scope="scope">//作用域插槽的用法(slot-scope)
{{ scope.msg }}
</div>
</Test>
</div>
<template id="test">
<div>
<slot name="default" :msg="msg"> </slot>
<p>這裏是test組件</p>
</div>
</template>
</body>
<script>
new Vue({
el:"#app",
components:{
'Test':{
template:"#test",
data(){
return {
msg:"你好"
}
},
}
}
})
</script>
作用域插槽:v-slot的用法
<body>
<div id="app">
<Test>
<template v-slot:header="scope">//v-slot定義作用域插槽
<div>
<h3>slot</h3>
<p> {{scope.msg}} </p>
</div>
</template>
</Test>
</div>
<template id="test">
<div>
<slot name="header":msg="msg"></slot>
<p>這裏是test組件</p>
</div>
</template>
</body>
<script>
Vue.component('Test',{
template:"#test",
data(){
return {
msg:'這裏是頭部'
}
}
});
new Vue({
}).$mount("#app")
</script>
Vue2.6.0
中使用v-slot
指令取代了特殊特性slot
與slot-scope
,但是從上述案例可以看出,v-slot
在使用時,需要在template
標籤內,這點大家在應用時要注意。