Vue 插槽：slot、slot-scope 与指令 v-slot 应用讲解

最新推荐文章于 2024-06-04 17:01:29 发布
最新推荐文章于 2024-06-04 17:01:29 发布
阅读量418 收藏 2
点赞数
分类专栏： vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41860765/article/details/124626835
版权

Vue 插槽：slot、slot-scope 与指令 v-slot 应用讲解

不具名插槽

<body>
   <div id="app">
      <Test>
         <div>slot插槽占位内容</div>
      </Test>
   </div>
   <template id="test">
      <div>
         <slot></slot>//定义插槽
         <h3>这里是test组件</h3>
      </div>
   </template>
   
</body>

<script>
   Vue.component('Test',{
      template:"#test"
   });

   new Vue({
      el:"#app",
   })
</script>

具名插槽

<body>
   <div id="app">
      <Test>
         <div slot="header">这里是头部</div>//具名插槽使用
         <div slot="footer">这里是尾部</div>
      </Test>
   </div>
   <template id="test">
      <div>
         <slot name="header"></slot>//具名插槽
         <h3>这里是Test组件</h3>
         <slot name="footer"></slot>
      </div>

   </template>
</body>
<script>
   Vue.component(
      'Test',{
         template:"#test"
   });
   new Vue({
      el:"#app"
   })

</script>

v-slot

v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容。
<body>
   <div id="app">
      <Test>
         <template v-slot:header>//v-slot指令使用插槽
            <h2>slot头部内容</h2>
         </template>
         
         <p>直接插入组件的内容</p>
         
         <template v-slot:footer>
            <h2>slot尾部内容</h2>
         </template>
      </Test>
   </div>
   
   <template id ='test'>
      <div class="container">
         <header>
            <!-- 我们希望把页头放这里 -->
            <slot name = "header"></slot>//具名插槽
         </header>
         <section>
            主体内容部分
         </section>
         <footer>
            <!-- 我们希望把页脚放这里 -->
            <slot name = 'footer'></slot>
         </footer>
      </div>
   </template>
   
</body>

<script>
   Vue.component('Test',{
      template:"#test"
   });
   new Vue({
      el:"#app"
   })
</script>

slot-scope 与 v-slot

slot-scope

在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。

在组件使用时，通过slot-scope=“scope”,接收组件中slot标签上绑定的数据。

通过scope.xxx就可以使用绑定数据了

<body>
   <div id="app">
      <Test>
         <div slot="default" slot-scope="scope">//作用域插槽的用法（slot-scope）
            {{ scope.msg }}
         </div>
         
      </Test>
   </div>

   <template id="test">
      <div>
         <slot name="default" :msg="msg"> </slot>
         <p>这里是test组件</p>
      </div>
   </template>
</body>
----------------------------------------------------
<script>
   new Vue({
      el:"#app",
      components:{
         'Test':{
            template:"#test",
            data(){
               return {
                  msg:"你好"
               }
            },
         }
      }
   })
</script>

v-slot

<body>
   <div id="app">
      <Test>
         <template v-slot:header="scope">//v-slot定义作用域插槽
            <div>
                  <h3>slot</h3>
                  <p> {{scope.msg}} </p>
            </div>
         </template>
      </Test>
   </div>
   
   <template id="test">
      <div>
         <slot name="header":msg="msg"></slot>
         <p>这里是test组件</p>
      </div>
   </template>
   
</body>
<script>
   Vue.component('Test',{
      template:"#test",
      data(){
         return {
            msg:'这里是头部'
         }
      }
   });

   new Vue({

   }).$mount("#app")
</script>
twj_one
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中的插槽--slot和v-slot
时清云的博客
04-25 1万+
今天团队内部有一个技术分享会，主要是vue进阶这一块，我对插槽slot的认识还不清晰，于是就总结一下 什么是插槽？ 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。 插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制 怎么用插槽？ 1.默认插槽 子组件(slotOn......
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
10-14
本文将深入讲解Vue插槽的特殊特性，包括非具名插槽、具名插槽、v-slot指令以及作用域插槽（slot-scope）的使用。 首先，我们要理解插槽的基本概念。插槽（slot）的作用是预留区域，允许外部在组件内部注入内容。当...
【Vue】组件二次封装小技巧 — 利用$slots接收插槽
y_coder的博客
11-08 1184
通过使用v-for和$slots来动态渲染插槽名，你可以实现更灵活的组件，让父组件能够以动态方式定义插槽内容。这使得组件更具通用性，适应各种不同的用例和需求。
Vue3基于element-plus二次封装搜索列表组件
最新发布
lzy970703的博客
06-04 739
element原生的props配置，透传给element，select比较特殊，valueName为绑定的值的key，labelName为绑定展示文案的key，options为下拉选先数据源。如果有比较定制化的需求，可以将列表和筛选栏组件拆开分别引入使用，减少了组件的耦合性，增强了组件的可扩展性；在列表接口请求前的事件，事件会返回search栏对应绑定的query，可以在此方法中处理接口请求入参，改函数return的参数就是最后请求接口的参数；组件主要接收两个参数，一个为顶部筛选栏的配置项。
深入理解vue中的slot与slot-scope
weixin_34194317的博客
01-25 836
作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。 实际上，插槽的概念很简单，下面通过分三部分来讲。这个部...
前端学习（2467）：在前端页面中引入百度地图
歌谣的博客
10-26 454
走在前端的大道上 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。 由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由组件自身控制； 插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么
vue中的v-slot
weixin_49651654的博客
12-23 490
v-slot的出现是为了代替原有的slot和slot-scope 简化了一些复杂的语法。 一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。
Vue中的插槽（v-slot）
Mr-yang的随笔
07-11 320
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。 具名插槽 相对匿名插槽组件slot标签带name命名的 书写组件： Vue.component('lv-hello', { template: ` <div> <slot name="header"></slot> <h1
Vue中的slot、slot-scope和v-slot
01-07
一.slot 插槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由...slot-scope就是作用域插槽。官方叫它作用域插槽，实际上，对比具名插槽，我们可以叫它带数据的插槽。具名插槽在组件的templat
vue template中slot-scope/scope的使用方法
10-18
在 Vue 2.5.0 及更高版本中，引入了一个新的特性——`slot-scope`（后来在 Vue 3 中被 `v-slot` 替代），用于在父组件中动态地传递数据到子组件的插槽内。`slot-scope` 或 `scope` 关键字允许我们在子组件的插槽内...
深入理解vue中slot与slot-scope的具体使用
08-28
slot-scope是Vue提供的一个特殊的指令，用于在父组件中传递数据给子组件的插槽中。slot-scope可以让父组件和子组件之间建立数据通道，实现数据的传递和共享。 六、slot和slot-scope的实际应用 在实际开发中，slot...
vue中的slot与slot-scope
juse__we的博客
06-12 3606
参考网站 https://cn.vuejs.org/v2/guide/components-slots.html https://www.cnblogs.com/waitforyou/p/6773978.html 非插槽模板指的是html模板 指的是‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由插件自身控制 插槽模板 指的是slot，它是一个空壳子，......
vue插槽slot、slot-scope、v-slot的区别以及嵌套插槽的使用
cafehaus的博客
01-21 3398
可以将 slot 理解成一个占位的东西，我们提前在模板中放置一个占位的标记，当其他地方要使用模板时就可以通过标记再传进来具体的内容，这样就可以实现更强的复用能力。slotslot 在英语中作为名词时表示：（可投入东西的）狭长孔，狭槽；（在一系列事件中为某事安排的）时间，空档；（组织、团体等中的）位置，职位。在 vue 中翻译成插槽：vue 实现了一套内容分发的 API，这套 API 的设计灵感源自...
vue 插槽（slot）v-slot 使用
半半的博客
12-03 1450
插槽是什么？ 官方解释 插槽就是Vue实现的一套内容分发的API，将元素作为承载分发内容的出口。 通俗解释 插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。简单理解就是子组件中留下个“坑”，父组件可以使用指定内容来补“坑”。 基本用法 现在，有两个组件，A与B，分别如下： A.vue <template> <div> <p>我是A组件</p>
[Vue] slot详解，slot、slot-scope和v-slot
weixin_55896343的博客
10-24 2996
在vue2.6中，上述的API被软废弃（3.0正式废弃），取而代之的是内置指令v-slot，可以缩写为#子组件：插槽用slot标签来确定渲染位置，父组件未传入内容时，显示slot里面给的内容。父组件：父组件在默认插槽的基础上加slot属性，值为子组件name属性。子组件:具名插槽用name属性标识插槽的名字，不传为默认插槽。让用户可以拓展组件，去更好地复用组件和对其做定制化处理。举一些例子，比如布局组件、表格列、下拉选项。父组件：直接在子组件的标签里面写入内容即可。//数据在子组件自身。
Vue中的slot和slot-scope使用
qq_43350941的博客
08-02 4576
vue 插槽
Vue中的v-slot详解，作用域插槽和具名插槽
xwnxwn的专栏
10-03 1039
如果我们想要插入元素到指定的位置需要借助slot,不然的话将插入失败，当一个组件中具有多个插槽的时候，如果没有借助slot属性会默认把元素插入到没有设置name属性值的slot组件中，当然，会把元素在每一个没有name属性的插槽中都插入一遍。如果相比较slot,v-slot在没有设置name属性的插槽出口也会带有隐含的名字“default”，当然这里先埋下伏笔，如果想用v-slot指令不插入具名的插槽，v-slot不带参数就可以。v-slot需要放置在template中
Vue——slot、slot-scope、scope、v-slot详解
WikY
12-07 3485
slot vue2.6.0之前使用，现已经是被废弃的，2.6.0之后新增v-slot替代 用于标记往哪个具名插槽中插入子组件内容。 <body> <div id="app"> <slot-test>插槽的使用</slot-test> </div> </body> <script> Vue.component('slot-test',{ template
vue中slot（插槽）详解，slot、slot-scope和v-slot
08-08
在Vue中，插槽（slot）是一种用于组件之间内容分发的机制。它允许父组件向子组件传递内容，使得子组件可以根据需要展示不同的内容。插槽可以用于传递任意类型的内容，包括HTML、文本和其他组件。 Vue中的插槽有三种使用方式：slot、slot-scope和v-slot。 1. slot：slot标签是最基本的插槽使用方式。父组件可以在子组件的slot标签中放置内容，这些内容将会替换子组件中具名插槽的位置。例如： ```html <!-- 父组件 --> <template> <child-component> <template v-slot:header> <h1>这是标题</h1> </template> </child-component> </template> <!-- 子组件 --> <template> <div> <slot name="header"></slot> <!-- 其他子组件内容 --> </div> </template> ``` 上述代码中，父组件在子组件的插槽中放置了一个标题，子组件通过`<slot name="header"></slot>`来展示这个插槽的内容。 2. slot-scope：slot-scope指令用于在插槽中接收父组件传递的数据。通过这种方式，子组件可以访问父组件的数据，并在插槽中进行处理。例如： ```html <!-- 父组件 --> <template> <child-component> <template v-slot:default="slotProps"> <h1>{{ slotProps.title }}</h1> <p>{{ slotProps.content }}</p> </template> </child-component> </template> <!-- 子组件 --> <template> <div> <slot :title="title" :content="content"></slot> <!-- 其他子组件内容 --> </div> </template> <script> export default { data() { return { title: '这是标题', content: '这是内容' }; } }; </script> ``` 在上述代码中，父组件通过`v-slot:default="slotProps"`将数据传递给子组件的插槽，并在插槽中使用`slotProps`来访问这些数据。 3. v-slot：v-slot指令是Vue2.6版本及以上引入的新特性，用于简化插槽的语法。它可以直接在子组件上使用，而不需要使用template标签。例如： ```html <!-- 父组件 --> <template> <child-component> <template #header> <h1>这是标题</h1> </template> </child-component> </template> <!-- 子组件 --> <template> <div> <slot name="header"></slot> <!-- 其他子组件内容 --> </div> </template> ``` 在上述代码中，父组件使用`#header`来定义插槽，并在子组件中使用`<slot name="header"></slot>`来展示插槽的内容。 总结一下，slot用于定义插槽的位置，slot-scope用于接收父组件传递的数据，并在插槽中进行处理，v-slot是对插槽语法的简化。这些插槽的使用方式可以根据具体需求选择适合的方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值