做面食网站,c 网站建设可视化实现,软件最全网站,网站模板修改插槽就是子组件中的提供给父组件使用的一个占位符#xff0c;用slot/slot 表示#xff0c;父组件可以在这个占位符中填充任何模板代码#xff0c;如 HTML、组件等#xff0c;填充的内容会替换子组件的slot/slot标签。
匿名插槽
1.在子组…插槽就是子组件中的提供给父组件使用的一个占位符用slot/slot 表示父组件可以在这个占位符中填充任何模板代码如 HTML、组件等填充的内容会替换子组件的slot/slot标签。
匿名插槽
1.在子组件放置一个插槽
templatedivslot/slot/div
/template 父组件使用插槽
在父组件给这个插槽填充内容 Dialogtemplate v-slotdiv2132/div/template/Dialog
具名插槽
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽而且可以放在不同的地方而父组件填充内容时可以根据这个名字把内容填充到对应插槽中 divslot nameheader/slotslot/slotslot namefooter/slot/div
父组件使用需对应名称 Dialogtemplate v-slot:headerdiv1/div/templatetemplate v-slotdiv2/div/templatetemplate v-slot:footerdiv3/div/template/Dialog
插槽简写 Dialogtemplate #headerdiv1/div/templatetemplate #defaultdiv2/div/templatetemplate #footerdiv3/div/template/Dialog
作用域插槽
作用域插槽由子组件暴露值出来
在子组件动态绑定参数 派发给父组件的slot去使用 divslot nameheader/slotdivdiv v-foritem in 100slot :dataitem/slot/div/divslot namefooter/slot/div 通过结构方式取值 Dialogtemplate #headerdiv1/div/templatetemplate #default{ data }div{{ data }}/div/templatetemplate #footerdiv3/div/template/Dialog
动态插槽
插槽可以是一个变量名
templateh2动态插槽动态更改插槽名/h2Tentemplate #[name]div我在哪儿/div/template/Ten
/templatescript setup langts
import { ref, reactive } from vue;
import Ten from ./components/ten.vue;
// let name ref(header);
let name ref(footer);
// let name ref(default);
/script 子组件
templatediv classheaderslot nameheader/slot/divdiv classmainslot/slot/divdiv classfooterslot namefooter/slot/div
/templatestyle langscss scoped
div {width: 100%;height: 100px;
}
.header {background: antiquewhite;
}
.main {background: aqua;
}
.footer {background: pink;
}
/style
效果图 12 vue3之异步组件代码分包内置组件suspense和teleport-CSDN博客文章浏览阅读23次。12 vue3之异步组件代码分包内置组件suspense和teleporthttps://blog.csdn.net/qq_37550440/article/details/142329387?sharetypeblogdetailsharerId142329387sharereferPCsharesourceqq_37550440spm1011.2480.3001.8118
