v-slot匿名插槽、具名插槽及作用域插槽

匿名插槽

只要是没有具体分配的内容,都会给到匿名插槽或者
同时在子组件中需替换为用于占位,即在modal组件中自定义的内容都会显示在slot占位的位置

// 定义组件
    vue.component('modal', {
      template: `
      <div class="modal">
        <div class="header">
          <slot></slot>    
        </div>
      </div>
   注意<slot></slot> 等于 <slot name="default"></slot>

具名插槽

指带有名字的插槽,如果组件内需要多个插槽,因此配置了名字的插槽,才可以实现定向分发指定插入.
元素有一个特殊的attribute:name。这个attribute可以用来定义额外的插槽:
(1)给插槽起名字

    // 定义组件
    Vue.component('modal', {
      template: `
      <div class="modal">
        <div class="header">
          <slot name="header"></slot>
        </div>
        <div class="main">
            <slot name="main"></slot>
        </div>
        <div class="footer">
            <slot name="default"></slot>
        </div>
      </div>
      `,
    })

(2)在分发内容时,通过template标签,将内容包裹,且里面可以添加任意标签内容,并指定分发的插槽名v-slot:插槽名。

作用域插槽

一个组件中有一个插槽,我们在插槽里写一个div,那么这个div就会被渲染到这个组件里,但是这个div又想调用这个组件里的数据或方法,那怎么办呢,我们可以加一个变量,把它带进插槽中。
简单来说:作用域插槽是一个带绑定数据的插槽。
通俗讲就是父组件需要用到子组件插槽里面数据的时候,通过v-slot:插槽名=’自定义对象名’来接收子组件插槽的数据

<template v-slot:default="scoPE">
     <button>{{scope.yes}}</button>
      <button>{{scope.no}}</button>
 </template>

总结


1.具名插槽的内容必须使用模板包裹
2. 等价于
3.vue >=2.6.0版本,使用v-slot替代slot 和 slot-scope
4.v-slot:slotName,slotName不需要加引号””
5.v-slot:header可以简写成#header , v-slot:default可以简写成#default

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » v-slot匿名插槽、具名插槽及作用域插槽

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活