14-Vue插槽（slot），制作可复用组件

最新推荐文章于 2023-08-19 17:36:16 发布

iaz999

最新推荐文章于 2023-08-19 17:36:16 发布

阅读量471

点赞数

分类专栏：大师之路——每日一练文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/iaz999/article/details/131650398

版权

本文深入探讨Vue的插槽机制，包括默认插槽、具名插槽和作用域插槽的使用，特别关注如何利用插槽创建可复用的列表组件。通过示例解释了如何在父组件中访问子组件的数据，并展示了动态插槽的应用，帮助开发者更好地理解和应用Vue的组件复用功能。

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

什么是 slot ?

Vue 将 <slot>元素作为承载分发内容的出口。插槽内可以包含任何模板代码，包括 HTML或其它组件。

在某些组件的模板中，有一部分区域需要父组件来指定

<!-- message组件：一个弹窗消息 -->
<div class="message-container">
  <div class="content">
    <!-- slot是vue的内置组件 —— 插槽、占位 -->
    <slot></slot>
  </div>
  <button>确定</button>
  <button>关闭</button>
</div>

<!-- 父组件App -->
<Message>
	<div class="app-message">
    <p>App Message</p>
    <a href="">detail</a>
  </div>
</Message>

<!-- 最终的结果 -->
<div class="message-container">
  <div class="content">
    <div class="app-message">
      <p>App Message</p>
      <a href="">detail</a>
    </div>
  </div>
  <button>确定</button>
  <button>关闭</button>
</div>