vue createElement创建插槽详解

最新推荐文章于 2025-05-29 09:16:57 发布

IT学霸

最新推荐文章于 2025-05-29 09:16:57 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 作用域插槽 createElement

本文链接：https://blog.youkuaiyun.com/shshanling/article/details/89761676

vue 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Vue中如何利用`createElement`创建默认插槽、命名插槽及作用域插槽。默认插槽通过`this.$slots.default`使用，命名插槽则指定`this.$slots.slot_name1`。作用域插槽借助`this.$scopedSlots`暴露内部数据给外部，并通过`v-slot:default="props"`进行定制，实现双向数据绑定。作用域插槽的更多用法将在后续文章中继续探讨。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、默认插槽

创建默认插槽的代码如下，很简单，你只需要把 this.$slots.default 理解为一个创建默认插槽时，由vue提供的全局静态变量即可。直接拿来用。

 Vue.component("slot_render",{
            render: function (createElement) {
                return createElement('div',[this.$slots.default])
            }
        })

<div id="slot_render_demo">
            <slot_render>
                默认插槽
            </slot_render>
        </div>

二、命名插槽

创建命名插槽的代码如下，也很简单，最关键的是插槽名字：this.$slots.slot_name1，这个名字(slot_name1)是自己随便取的，然后在使用的时候要对应起来即可。

Vue.component("slot_render",{
            render: function (createElement) {
                return createElement('div',[ this.$slots.slot_name1,this.$slots.slot_name2])
            }
        })

<div id="slot_render_demo">
            <slot_render>
                <template v-slot:slot_name1>
                    命名插槽1
                </template>
                <template v-slot:slot_name2>
                    命名插槽2
                </template>
            </slot_render>
        </div>

三、作用域插槽

组件代码如下，主要使用到了全局变量：this.$scopedSlots，它的后面跟上插槽名称。作用域插槽主要是提供一种途径：把内部组件数据暴露给外部调用者，然后外部调用者进行定制或加工。

Vue.component("slot_render",{
            props:['msg'],
            render: function (createElement) {
                return createElement('div', [
                  this.$scopedSlots.default({
                      text: this.msg
                  })
              ])
            }
        })

调用者代码如下，关键的代码是：v-slot:default="props"，其中default是插槽名称，必须和组件定义时的一致。props时一个作用域名称，它的名字可以随便取，不一定非得是props。通过这个名称就可以访问组件定义时的作用域插槽的数据。

<div id="slot_render_demo">
            <input type="text" v-model="msg" />
            <slot_render v-bind:msg="msg">
                <template v-slot:default="props">
                    <span>{{props.text}}</span>
                </template>
            </slot_render>
        </div>

在这个例子中，当input的内容改变后，插槽里的内容也会自响应的变化。