Vue19_slot插槽

最新推荐文章于 2024-06-28 08:56:12 发布

ParadoxLin

最新推荐文章于 2024-06-28 08:56:12 发布

阅读量98

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/linxwx/article/details/114986019

版权

Vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

前言：组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。

1. 匿名插槽与具名插槽

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。口是搜索框，还是文字，还是菜单。由调用者自己来决定。

<!--匿名插槽-->
<slot></slot>

<!--具名插槽-->
<template id="cpn">
	<div>
	    <slot name="header"></slot>
	    <slot></slot>
	    <slot name="footer"></slot>
	</div>
</template>


<!--替换-->
<body>
  <div id="app">
    <cpn>
      <div slot="header">替换header</div>
      <div>替换匿名slot</div>
      <div slot="footer">替换footer</div>
    </cpn>
  </div>
</body>