vue 组件插槽

一、vue插槽有什么用

插槽语法是vue中实现内容分发的api,用于复合组件开发。该技术在通用组件库开发中有大量应用

二、匿名插槽

// 子组件
<template>
  <div>
    <slot></slot>
  </div>
</template>
// 父组件
<hello-world>
    <p>hello world</p>
</hello-world>

三、具名插槽

// 子组件 一个不带 name 的 slot 出口会带有隐含的名字default。
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
// 父组件
<template>
   <div>
      <hello-world>
        <template v-slot:header>
          我是header
        </template>
        <template>
          我是default
        </template>
        <template v-slot:footer>
          我是footer
        </template>
      </hello-world>
   </div>
</template>

四、作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

// 子组件
<template>
  <div>
    <slot name="header" :msg="msg" :val="val"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>
// 父组件 slotProps可以替换
<template>
   <div>
      <hello-world>
        <template v-slot:header="slotProps">
          {{slotProps.msg}}{{slotProps.val}}
        </template>
        <template>
          我是default
        </template>
        <template v-slot:footer>
          我是footer
        </template>
      </hello-world>
   </div>
</template>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 编译作用域 在vue组件中作用域简单的说就是: 父组件模板的内容在父组件的作用域内编译,子组件模板的内容在子组件的...
    羊烊羴阅读 1,610评论 0 1
  • 【2019-3-4更新】Vue 2.6+修改了部分语法,对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 10,317评论 2 36
  • 一、概要 插槽是指把任意内容插入指定的位置,而这个位置使用``作为占位符简单的来说就是在组件的某个节点内预留一个位...
    唯老阅读 780评论 0 0
  • 什么是组件? 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装...
    youins阅读 9,536评论 0 13
  • 案例一 点亮星星 通过控制tempScore来控制鼠标滑过离开的分数,当点击确定时,score等于tempScor...
    skydot阅读 315评论 0 0