网站制作 用户登录系统,wordpress电影站开发,wordpress 首页位置,祥云平台 网站建设在 Vue 中#xff0c;插槽#xff08;slot#xff09;是实现组件内容分发的机制#xff0c;允许我们将子组件的内容传递给父组件#xff0c;从而提升组件的可复用性和灵活性。插槽的本质是通过将父组件内容传递到子组件指定的插槽位置#xff0c;使得子组件在渲染时可以动…在 Vue 中插槽slot是实现组件内容分发的机制允许我们将子组件的内容传递给父组件从而提升组件的可复用性和灵活性。插槽的本质是通过将父组件内容传递到子组件指定的插槽位置使得子组件在渲染时可以动态填充不同的内容。
1. 插槽的类型
Vue 中有几种主要的插槽类型
1、默认插槽Default Slot
默认插槽用于在组件没有指定插槽时将内容插入到子组件的默认位置。 !-- 父组件中传递内容 --
MyComponentp这是默认插槽内容/p
/MyComponent!-- 子组件模板 --
templatedivslot/slot/div
/template2、具名插槽Named Slot
具名插槽允许我们通过 name 属性指定插槽名称以便在父组件中为不同的插槽位置传递内容 !-- 父组件中传递具名内容 --
MyComponenttemplate v-slot:headerh1标题内容/h1/templatetemplate v-slot:footerp底部内容/p/template
/MyComponent!-- 子组件模板 --
templatedivslot nameheader/slot!-- 默认插槽 --slot/slotslot namefooter/slot/div
/template
3、作用域插槽Scoped Slot
作用域插槽允许子组件向父组件提供数据从而让父组件可以根据该数据动态渲染插槽内容。适用于一些内容需要根据子组件提供的数据进行渲染的场景。 !-- 父组件 --
MyComponent v-slot:default{ data }p子组件提供的数据{{ data }}/p
/MyComponent!-- 子组件模板 --
templateslot :datasomeData/slot
/templatescript
export default {data() {return {someData: Hello slot}}
}
/script
2. 插槽的本质
插槽的本质是将父组件内容通过编译成 vnode虚拟节点然后在子组件渲染时将这些 vnode 放置到子组件的指定位置。Vue 通过 vnode 的编译与插槽的传递将插槽内容与子组件进行动态绑定这样可以提升代码复用性并保持组件内部逻辑的独立性。
当我们使用插槽传递数据时实际传递的是一个对象 { }每一个插槽对应对象的属性。属性名插槽名默认为 default属性值函数 function返回值是虚拟节点。
{// 默认插槽default: function(){},// 具名插槽slot1: function(){},// 作用域插槽slot2: function({ msg}){},
}
因此传递插槽也就是在传递函数使用插槽在调用函数返回虚拟节点。
3. 验证结论
正常使用如下
App.vue
templateCompp默认插槽default slot/ptemplate #slot1p具名插槽slot1/p/templatetemplate #slot2{ msg }p作用域插槽{{ msg }}/p/template/Comp
/templatescript setup
import Comp from ./components/Comp.vue
/scriptComp.vue
templatedivslot/slotslot nameslot1/slotslot nameslot2 msghello slot/slot/div
/template
展示为 下面使用 JS 实现一下
Comp.js
import { createElementVNode } from vue
export default {setup(_, { slots }) {console.log(~ slots:, slots)const defaultVNodes slots.default()const slot1VNodes slots.slot1()const slot2VNodes slots.slot2({ msg: hello slot })console.log(~ VNodes, defaultVNodes, slot1VNodes, slot2VNodes)return () {return createElementVNode(div, null, [...defaultVNodes, ...slot1VNodes, ...slot2VNodes])}}
}
或者
import { defineComponent, h } from vue
export default defineComponent({name: Comp,props: {},setup(props, { slots }) {return () h(div, [slots.default ? slots.default() : h(p, 默认插槽),slots.slot1 ? slots.slot1() : h(p, 具名插槽 slot1),slots.slot2 ? slots.slot2({ msg: Hello scoped slot }) : null])}
})插槽的本质就是在子组件中调用函数创建虚拟节点显示到页面上。 4. 使用 slot 注意事项
1、避免滥用插槽
插槽虽然可以极大地提升组件的灵活性但过多的插槽会使组件的 API 变得复杂不易理解和维护。
2、作用域插槽的命名
为了代码可读性使用作用域插槽时建议使用有意义的命名如 v-slot:default{ item } 而不是 v-slot{ data }这样能让代码的含义更加清晰。
3、默认插槽内容
在设计组件时可以为插槽设置默认内容以便在父组件未传递内容时插槽依旧可以展示一些基本信息。比如slot默认内容/slot。
4、避免嵌套过深的插槽结构
深层嵌套的插槽结构可能会导致代码可读性差同时也会增加渲染的复杂度因此在设计组件时尽量保持插槽的扁平结构。
