文章目录
- 插槽的作用
- 基本使用
- 默认内容
- 具名插槽 多个插槽使用
- 作用域插槽
- 插槽默认内容 数据展示
- 插槽模版传参
- 多个参数
- 被提供的内容只有默认插槽时&＃xff0c;组件的标签才可以被当作插槽的模板来使用
- 解构插槽 Prop
- 动态插槽名
插槽的作用
组件的插槽也是为了让我们封装的组件更加具有扩展性
基本使用
展现组件标签内部的内容&＃xff08;包括标签&＃xff09;
插槽内容要在组件标签内部
<!DOCTYPE html>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><title>v-slot</title><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body><div id&＃61;"app"><box-cs><h1>Something bad happened.</h1><!-- slot内容来源 --></box-cs><!-- slot展现组件内部的内容包括html节点 --></div><script>Vue.component(&＃39;box-cs&＃39;,{template:&＃96;
&＃96;})new Vue({el:"#app"})</script>
</body>
</html>
默认内容
只会在组件内部没有提供内容的时候被渲染
<box-cs></box-cs>Vue.component(&＃39;box-cs&＃39;,{template:&＃96;box-cs默认内容
&＃96;
})
具名插槽 多个插槽使用
一个不带 name 的 出口会带有隐含的名字“default”。
任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
在组件里面
v-slot 只能用于 template 标签
<template v-slot:header>template><template slot:header>template><div slot:header>div>
<html lang&＃61;"en">
<head><meta charset&＃61;"UTF-8"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"ie&＃61;edge"><title>v-slottitle><script src&＃61;"https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body><div id&＃61;"app"><base-layout><template v-slot:header><h1>header 插槽内容h1>template><template v-slot:default><h1>默认插槽内容h1>template><template v-slot:footer><h1>footer 插槽内容h1>template>base-layout>div><script>Vue.component(&＃39;base-layout&＃39;,{template:&＃96;
&＃96;})new Vue({el:"#app",})script>
body>
html>
具名插槽的缩写
只能用于 template 标签
<div id&＃61;"app"><base-layout><template #header><h1>header 插槽内容h1>template><template #footer&＃61;"data"> <h1>footer 插槽内容h1>{{data}}template>base-layout>
div>Vue.component(&＃39;base-layout&＃39;,{data(){return{footer:{title:&＃39;footer&＃39;,msg:&＃39;footer is msg&＃39;}}},template:&＃96;<div><header><slot name&＃61;"header">slot>header><main><slot>slot>main><footer><slot name&＃61;"footer" :footer&＃61;"footer">slot>footer>div>&＃96;
})
new Vue({el:"#app",
})
作用域插槽
插槽默认内容 数据展示
<div id&＃61;"app"><base-layout></base-layout>
</div>
Vue.component(&＃39;base-layout&＃39;,{data(){return{user:&＃39;userdata&＃39;,age:18}},template:&＃96;{{user}}{{age}}
&＃96;
})
new Vue({el:"#app",
})
插槽模版传参
父组件替换插槽的标签&＃xff0c;但是内容由子自己提供
<div id&＃61;"app"><base-layout><template v-slot:default&＃61;"user"><h1>默认插槽内容</h1><!-- user:{ "user": "userdata"} -->{{ user.user }}</template></base-layout>
</div>
Vue.component(&＃39;base-layout&＃39;,{data(){return{user:&＃39;userdata&＃39;,age:18}},template:&＃96;
&＃96;
})
new Vue({el:"#app",
})
多个参数
<div id&＃61;"app"><cpn>cpn><cpn><div slot-scope&＃61;"slot">{{slot.list.join(&＃39; -- &＃39;)}}div>cpn><cpn><template v-slot:default&＃61;"data">{{data}}template> cpn><cpn><template v-slot&＃61;"data">{{data}}template> cpn>
div><template id&＃61;"tmp"><div><slot :list&＃61;"plist,name"><ul><li v-for&＃61;"(item,i) in plist">{{item}}li>ul>slot>div>
template><script>const cpn &＃61; {template:&＃39;#tmp&＃39;,data(){return {plist:[&＃39;aaa&＃39;,&＃39;xxx&＃39;,&＃39;Javascript&＃39;,&＃39;java&＃39;],name:"组件"}}}const app &＃61; new Vue({data:{},components:{cpn},methods:{}}).$mount("#app")
script>
被提供的内容只有默认插槽时&＃xff0c;组件的标签才可以被当作插槽的模板来使用
只要出现多个插槽&＃xff0c;请始终为所有的插槽使用完整的基于 的语法 即具名插槽写法
<div id&＃61;"app"><base-layout v-slot:default&＃61;"data">{{ data}}</base-layout><!--或--><!--<base-layout v-slot&＃61;"data">{{ data}}</base-layout>-->
</div>Vue.component(&＃39;base-layout&＃39;,{data(){return{user:&＃39;userdata&＃39;,age:18}},template:&＃96;
&＃96;
})
new Vue({el:"#app",
})
解构插槽 Prop
<div id&＃61;"app"><base-layout><template v-slot:default&＃61;"{user,age,sex&＃61;{name:&＃39;ff&＃39;}}"><h1>默认插槽内容</h1>{{ user }} {{user}}</template></base-layout>
</div>
Vue.component(&＃39;base-layout&＃39;,{data(){return{user:&＃39;userdata&＃39;,age:18}},template:&＃96;
&＃96;
})
new Vue({el:"#app",
})
动态插槽名
<div id&＃61;"app"><base-layout ff&＃61;"header"><template #[header]><h1>header 插槽内容</h1></template></base-layout>
</div>Vue.component(&＃39;base-layout&＃39;,{props:[&＃39;ff&＃39;],data(){return{user:&＃39;userdata&＃39;,age:18}},template:&＃96;
&＃96;
})
new Vue({el:"#app",data:{header:&＃39;header&＃39;}
})
京公网安备 11010802041100号