网站模版 拓,东莞市城建局,wordpress商城插件,wordpress 开发商城Vue对于插槽有两个专门的APIvm.$slots和vm.$scopedSlots#xff0c;分别是普通插槽和作用域插槽#xff0c;使用JSX语法或渲染函数的时候#xff0c;定义插槽将使用上述两个API。
渲染函数createElement
普通插槽和作用域插槽在定义上相差不大#xff0c;但是在使用方法上…Vue对于插槽有两个专门的APIvm.$slots和vm.$scopedSlots分别是普通插槽和作用域插槽使用JSX语法或渲染函数的时候定义插槽将使用上述两个API。
渲染函数createElement
普通插槽和作用域插槽在定义上相差不大但是在使用方法上略微有点区别详见渲染函数数据对象
普通插槽插槽内容以children子节点形式然后在数据对象中指定插槽名
// 定义带插槽的组件$slots.default为匿名插槽其余的则是具名插槽匿名插槽的插槽名可以省略
const MySlot {render (h) {return h(div, [h(header, [this.$slots.header]),h(main, [this.$slots.header]),h(footer, [this.$slots.footer])])}
}// 在children子节点中指定插槽名以使用具名插槽未指定插槽名的则放入匿名插槽中
export default {components: { MySlot },render (h) {return h(MySlot, [h(template, { slot: header }, hello world),children node,h(div, { slot: footer }, this is footer)])}
}作用域插槽与普通插槽不同作用域插槽的内容直接放入渲染函数的数据对象中的
// 定义作用域插槽
const MySlot {data () {return { user: John, content: vue, copytight: CopyRight }},render (h) {return h(div, [h(header, [this.$scopedSlots.header({ user: this.user })]),h(main, [this.$scopedSlots.default({ content: this.content })]),h(footer, [this.$scopedSlots.footer({ copytight: this.copytight })])])}
}// 要使用作用域插槽的数据内容则插槽必须在组件的数据对象scopedSlots中使用如header所示
// 作用域插槽也可以当作普通插槽使用如default和footer
export default {components: { MySlot },render (h) {return h(MySlot, {scopedSlots: {header: props hello, ${props.user}}}, [children node,h(div, { slot: footer }, this is footer)])}
}关于静态插槽和作用域插槽 你可以通过 this.$slots 访问静态插槽的内容每个插槽都是一个 VNode 数组 也可以通过 this.$scopedSlots 访问作用域插槽每个作用域插槽都是一个返回若干 VNode 的函数 this.$slots 返回的是数组this.$scopedSlots 返回的是函数这里踩一个坑使用 this.$scopedSlots 定义的插槽如果未被使用则会报错
例如删除或注释掉具名插槽footer内容后控制台报错
[Vue warn]: Error in render: TypeError: this.$scopedSlots.footer is not a function如何避免这个问题暂时没有找到解决方案研究还不够深入 2021年1月25日补充 使用 this.$scopedSlots 定义的插槽如果未被使用则会报错 原因 以footer插槽为例其实不用想的太复杂作用域插槽this.$scopedSlots.footer()就是一个函数MySlot组件使用了这个函数但是父组件却没有传入此函数的定义所以MySlot再调用这个函数的时候发生报错。 解决办法 在MySlot调用this.$scopedSlots.footer()前进行一次判断此函数是否存在即可。 JSX语法
JSX是createElement的语法糖在用法上没有什么区别对照着上面的内容稍微改一改就好了
静态插槽
const MySlot {render (h) {return (divheader{this.$slots.header}/headermain{this.$slots.default}/mainfooter{this.$slots.footer}/footer/div)}
}export default {render (h) {return (MySlottemplate slotheaderhello world/templatechildren nodediv slotfooterthis is footer/div/MySlot)}
}作用域插槽
const MySlot {data () {return { user: John, content: vue, copytight: CopyRight }},render (h) {return (divheader{this.$scopedSlots.header({ user: this.user })}/headermain{this.$scopedSlots.default({ content: this.content })}/mainfooter{this.$scopedSlots.footer({ copytight: this.copytight })}/footer/div)}
}export default {render (h) {return (MySlotscopedSlots{{header: props hello, ${props.user}}}children nodediv slotfooterthis is footer/div/MySlot)}
}
