最好的wordpress教程,啥叫优化,个人注册登录入口,珠三角做网站插槽是子组件中的提供给父组件使用的一个占位符#xff0c;用 slot 表示#xff0c;父组件可以在这个占位符中填充任何模板代码#xff0c;如 HTML、组件等#xff0c;填充的内容会替换子组件的slot 元素。slot 元素是一个插槽出口 (slot outlet)用 slot 表示父组件可以在这个占位符中填充任何模板代码如 HTML、组件等填充的内容会替换子组件的slot 元素。slot 元素是一个插槽出口 (slot outlet)标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染。 一、匿名插槽
子组件 FancyButton 中插槽模板
# 基础用法
button classfancy-btn!-- 插槽出口 --slot/slot
/button# 可指定默认插槽内容父组件没有提供任何插槽内容时默认渲染的插槽内容 Submit
button classfancy-btnslotSubmit/slot
/button父组件填充插槽内容
FancyButton!-- 插槽内容 --divClick me!/div
/FancyButton# 或FancyButton!-- 插槽内容 --template v-slotdivClick Me/div/template
/FancyButton最终渲染出的 DOM 结构如下
button classfancy-btnClick me!/buttonps. 通过使用插槽使组件更加灵活和具有可复用性。这样组件可以用在不同的地方渲染各异的内容但同时还保证都具有相同的样式。 二、具名插槽 (named slots)
具名插槽其实就是给插槽取个名字。一个子组件可以放多个插槽而且可以放在不同的地方而父组件填充内容时可以根据这个名字把内容填充到对应插槽中。
对于这种场景slot 元素可以有一个特殊的属性 name用来给各个插槽分配唯一的 ID以确定每一处要渲染的内容
子组件预留的插槽
div classcontainerheaderslot nameheader/slot/headermain-- 没有提供 name 的 slot 出口会隐式地命名为 “default” --slot/slot/mainfooterslot namefooter/slot/footer
/div父组件对指定插槽进行填充
要为具名插槽传入内容我们需要使用一个含 v-slot 指令的 template 元素并将目标插槽的名字传给该指令。
BaseLayouttemplate v-slot:headerdivheader/div/templatetemplate v-slotdivdefault/div/templatetemplate v-slot:footerdivfooter/div/template
/BaseLayoutv-slot 语法糖简写方式
v-slot 有对应的简写 #因此 template v-slot:header 可以简写为 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
/BaseLayout# 或# 当一个组件同时接收默认插槽和具名插槽时所有位于顶级的非 template 节点都被隐式地视为默认插槽的内容。所以上面也可以写成
BaseLayouttemplate #headerh1Here might be a page title/h1/template!-- 隐式的默认插槽 --pA paragraph for the main content./ppAnd another one./ptemplate #footerpHeres some contact info/p/template
/BaseLayout现在 template 元素中的所有内容都将被传递到相应的插槽。最终渲染出的 HTML 如下
div classcontainerheaderh1Here might be a page title/h1/headermainpA paragraph for the main content./ppAnd another one./p/mainfooterpHeres some contact info/p/footer
/div三、动态插槽
动态指令参数在 v-slot 上也是有效的即可以通过变量定义动态插槽名
script setupimport { ref } from vue;const name ref(header)
/script
templatebase-layouttemplate v-slot:[name]div动态插槽/div/template!-- 缩写为 --template #[name]div动态插槽/div/template/base-layout
/temppate四、作用域插槽
在某些场景下插槽的内容可能想要同时使用父组件域内和子组件域内的数据。可以使用属性绑定的方式向一个插槽的出口上传递数据称为插槽 props 。
4.1 匿名插槽数据传递
子组件 MyComponent传递插槽 props
divslot :textgreetingMessage :count1/slot
/div 父组件接收插槽 props默认插槽通过子组件标签上的 v-slot 指令直接接收到了一个插槽 props 对象
MyComponent v-slotslotProps{{ slotProps.text }} {{ slotProps.count }}
/MyComponent# 或 在 v-slot 中使用解构语法
MyComponent v-slot{ text, count }{{ text }} {{ count }}
/MyComponent4.2 具名插槽数据传递
具名作用域插槽的工作方式也是类似的插槽 props 可以作为 v-slot 指令的值被访问到v-slot:nameslotProps。
MyComponenttemplate #headerheaderProps{{ headerProps }}/templatetemplate #defaultdefaultProps{{ defaultProps }}/templatetemplate #footerfooterProps{{ footerProps }}/template
/MyComponent4.3 作用域插槽应用场景高级列表组件示例
你可能想问什么样的场景才适合用到作用域插槽这里我们来看一个 FancyList 组件的例子。它会渲染一个列表并同时会封装一些加载远端数据的逻辑、使用数据进行列表渲染、或者是像分页或无限滚动这样更进阶的功能。然而我们希望它能够保留足够的灵活性将对单个列表元素内容和样式的控制权留给使用它的父组件。我们期望的用法可能是这样的
FancyList :api-urlurl :per-page10template #item{ body, username, likes }div classitemp{{ body }}/ppby {{ username }} | {{ likes }} likes/p/div/template
/FancyList在 FancyList 之中我们可以多次渲染 slot 并每次都提供不同的数据 (注意我们这里使用了 v-bind 来传递插槽的 props)
ulli v-foritem in itemsslot nameitem v-binditem/slot/li
/ul上面的 FancyList 案例同时封装了可重用的逻辑 (数据获取、分页等) 和视图输出但也将部分视图输出通过作用域插槽交给了消费者组件来管理
