首页 > 其他 > 详细

【Vue】组件插槽

时间:2020-01-19 14:51:41      阅读:50      评论:0      收藏:0      [点我收藏+]

注意:2.6.0之后为具名插槽和作用域引入了统一语法v-slot,取代了slot和slot-scope两个目前已被废弃但未被移除且在文档中的特性。

父组件模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在自作用域中编译的。

插槽分为三类:

1.匿名插槽(默认插槽),没有命名有且只有一个

2.具名插槽,即slot带有name

3.作用域插槽,子组件数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

匿名插槽(默认插槽,name为default)

在子组件通过slot添加匿名插槽

<template>
  <div class="container">
    <header>
      <slot></slot>
    </header>
    <div>children</div>
  </div>
</template>

父组件使用插槽 

<template>
  <div>
    <children>
      <template>Father use slot</template>
    </children>
  </div>
</template>

效果:

技术分享图片

<slot>有name特性,当不填时默认为default,上例实际是子组件<slot name="default"/>,父组件

<template v-slot:default>默认插槽</template>

具名插槽

即指定子组件中name特性的值

<template>
  <div class="container">
    <slot></slot>
    <header>
      <slot name="title"></slot>
    </header>
    <div>children</div>
  </div>
</template>

父组件

<template>
  <div>
    <children>
      <template>默认插槽</template>
      <template v-slot:title>具名插槽</template>
    </children>
  </div>
</template>

效果:

技术分享图片

作用域插槽

能够访问子组件中才有的数据,重点是用slotProps接收子组件里的属性

子组件

<template>
  <div class="container">
    <header>
      <slot name="header" :user="user">{{user.lastName}}</slot>
    </header>
  </div>
</template>

export default {
  data() {
    return {
      user: {
        firstName: "l",
        lastName: "pr"
      }
    };
  },
};

父组件

//slotProps可以随意命名,接收的是子组件标签slot上属性数据的集合
<template>
  <div>
    <children>
      <template #header="slotProps">
        <div>{{slotProps.user.firstName}}</div>
        <div>{{slotProps.user.lastName}}</div>
      </template>
    </children>
  </div>
</template>

效果:

技术分享图片

 

结构prop

即是es6的解构赋值,子组件不变,父组件

    <children>
      <template #header="{user,arr}">
        <div>{{user.firstName}}</div>
        <div>{{arr[1]}}</div>
      </template>
    </children>

  

动态插槽名

在data中指定dynamicSlotName,通过改变dynamicSlotName的值来变换插槽

<template v-slot:[dynamicSlotName]>
    ...
</template>

具名插槽缩写

v-slot:header缩写为#header

【Vue】组件插槽

原文:https://www.cnblogs.com/Mijiujs/p/12213392.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!