怎样做网站外部样式,dz网站建设视频教程,韩国个人主网页设计培训,网页设计实训报告12001、先说一下具名插槽 有时在一个组件中包含多个插槽出口是很有用的。举例来说#xff0c;在一个 组件中#xff0c;有如下模板#xff1a;
div classcontainerheader!-- 标题内容放这里 --/headermain!-- 主要内容…1、先说一下具名插槽 有时在一个组件中包含多个插槽出口是很有用的。举例来说在一个 组件中有如下模板
div classcontainerheader!-- 标题内容放这里 --/headermain!-- 主要内容放这里 --/mainfooter!-- 底部内容放这里 --/footer
/div对于这种场景slot 元素可以有一个特殊的 attribute name用来给各个插槽分配唯一的 ID以确定每一处要渲染的内容
div classcontainerheaderslot nameheader/slot/headermainslot/slot/mainfooterslot namefooter/slot/footer
/div这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 出口会隐式地命名为“default”
要为具名插槽传入内容我们需要使用一个含 v-slot 指令的 template 元素并将目标插槽的名字传给该指令
BaseLayouttemplate v-slot:header!-- header 插槽的内容放这里 --/template
/BaseLayoutv-slot有对应的简写 #因此 可以简写为 template #header。其意思就是“将这部分模板片段传入子组件的 header 插槽中”。
下面我们给出完整的、向 传递插槽内容的代码指令均使用的是缩写形式
BaseLayouttemplate #headerh1Here might be a page title/h1/templatetemplate #defaultpA paragraph for the main content./ppAnd another one./p/templatetemplate #footerpHeres some contact info/p/template
/BaseLayout2、作用域插槽
使用场景 数据在组件的自身但根据数据生成的结构需要组件的使用者来决定。
!-- MyComponent 的模板 --
divslot :textgreetingMessage :count1/slot
/div使用者
MyComponent v-slotslotProps{{ slotProps.text }} {{ slotProps.count }}
/MyComponent我们可以将其类比为一个函数函数名为default
MyComponent({// 类比默认插槽将其想成一个函数default: (slotProps) {return ${slotProps.text} ${slotProps.count}}
})function MyComponent(slots) {const greetingMessage helloreturn div${// 在插槽函数调用时传入 propsslots.default({ text: greetingMessage, count: 1 })}/div
}3、具名作用域插槽
使用者
FancyList :api-urlurl :per-page10// 使用格式// 1、(简写)#插槽名传过来的值// 2、(非简写)v-slot:插槽名字 传过来的值template #item{ body, username, likes } // 这里对传过来的值进行了解构div classitemp{{ body }}/ppby {{ username }} | {{ likes }} likes/p/div/template
/FancyList在 之中我们可以多次渲染 并每次都提供不同的数据 (注意我们这里使用了 v-bind 来传递插槽的 props)
ulli v-foritem in itemsslot nameitem v-binditem/slot/li
/ul
