【Vue学习笔记_11】slot插槽

最新推荐文章于 2024-11-05 15:31:54 发布

BugFrog1024

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量348

点赞数

分类专栏： Vue 前端文章标签： vue 前端 javascript

本文链接：https://blog.csdn.net/weixin_44752429/article/details/121583788

版权

本文探讨Vue的slot插槽机制，用于增强组件的可扩展性。介绍了插槽的基本用法，如何创建具名插槽以区分多个插槽，并详细解释了作用域插槽的概念，允许父组件自定义数据展示方式。通过实例展示了如何在组件中定义插槽，以及父组件如何传入内容替换或扩展这些插槽。

摘要由CSDN通过智能技术生成

插槽（slot）：预留空间，让封装的组件更具扩展性，让使用者可以根据需求决定组件内部的一些地方展示什么。

配套可执行代码示例 => GitHub

插槽的基本使用

应用场景：导航栏。几乎每个页面都有导航栏，但它们之间又有所区别。

最好的封装方式：将共性抽取到组件中，将不同暴露为插槽。

基本使用：子组件中使用<slot>标签定义插槽，可以指定默认元素。接着父组件在使用子组件时传入替换元素，如果没有传则显示默认元素，如果传入了多个则一起作为slot的替换元素。

<!--父组件模板-->
<div id="app">
  <cpn></cpn>
  <cpn>
    <span>哈哈哈</span>
  </cpn>
</div>

<!--子组件模板-->
<template id="cpn">
  <div>
    <h2>我是子组件</h2>
    <slot>
      <!--默认元素-->
      <button>按钮</button>
    </slot>
  </div>