建设网站群的指导思想,phpnow wordpress,苏州 互联网,西客站网站建设插槽#xff08;Slots#xff09;是 Vue.js 框架中的一个功能#xff0c;允许在组件内部预留一些可替换的内容。通过插槽#xff0c;可以给父组件填充模板代码#xff0c;让父组件向子组件传递自定义的内容#xff0c;以便在子组件中进行展示或处理。
1. 匿名插槽
Son.…插槽Slots是 Vue.js 框架中的一个功能允许在组件内部预留一些可替换的内容。通过插槽可以给父组件填充模板代码让父组件向子组件传递自定义的内容以便在子组件中进行展示或处理。
1. 匿名插槽
Son.vue
templatedivheader classheader/headermain classmainslot/slot/mainfooter classfooter/footer/div
/templatescript setup langts/scriptstyle scoped
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
/styleApp.vue
templatediv classcontentSontemplate v-slotdiv插入中间/div/template/Son/div
/templatescript setup langts
import Son from ./components/Son.vue
/scriptstyle scoped/style2. 具名插槽
Son.vue
templatedivheader classheaderslot nameheader/slot/headermain classmainslot/slot/mainfooter classfooterslot namefooter/slot/footer/div
/templatescript setup langts/scriptstyle scoped
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
/styleApp.vue
templatediv classcontentSontemplate v-slot:headerdiv插入上面/div/templatetemplate v-slotdiv插入中间/div/templatetemplate v-slot:footerdiv插入下面/div/template/Son/div
/templatescript setup langts
import Son from ./components/Son.vue
/scriptstyle scoped/style3. 插槽作用域
Son.vue
templatedivheader classheaderslot nameheader/slot/headermain classmaindiv v-for(item,index) in dataslot :indexindex :dataitem/slot/div/mainfooter classfooterslot namefooter/slot/footer/div/templatescript setup langts
import { reactive } from vue;
type names {name: string,age: number
}
const data reactivenames[]([{name: 张三, age: 18},{name: 李四,age: 19},{name: 王五,age: 20}
])/scriptstyle scoped
.header {height: 200px;background-color: red;color: white;
}.main {height: 300px;background-color: blue;color: white;
}.footer {height: 200px;background-color: green;color: white;
}
/styleApp.vue
templatediv classcontentSontemplate v-slot:header!-- 简写为#header --div插入上面/div/template!-- 直接解构出 data index --template v-slot{ data, index }!-- 匿名插槽简写为#default{ data, index } --div{{ data.name }}--{{ data.age }}--{{ index }}/div/templatetemplate v-slot:footerdiv插入下面/div/template/Son/div
/templatescript setup langts
import Son from ./components/Son.vue
/scriptstyle scoped/style4. 动态插槽
App.vue
templatediv classcontentSontemplate v-slot:[name]!-- 或者简写为#[name] --div我在哪儿/div/template/Son/div
/templatescript setup langts
import { ref } from vue
import Son from ./components/Son.vue
let name ref(footer)
// let name ref(deault) // 插入中间的匿名插槽
/scriptstyle scoped/style
