【融职培训】Web前端学习第7章 Vue基础教程7 插槽、DOM操作、过

最新推荐文章于 2024-09-06 10:20:56 发布

lmonkey_01

最新推荐文章于 2024-09-06 10:20:56 发布

阅读量197

点赞数

本文链接：https://blog.csdn.net/ITXDL123/article/details/106923605

版权

本文主要讲解Vue中的插槽用法，包括插槽的基础概念、具名插槽以及如何通过ref获取真实DOM节点。此外，还提到了在实际开发中使用插槽自定义组件的重要性，并给出了课后练习，如利用插槽实现表格组件和编写数据加载及数字转换过滤器。

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

一、插槽

插槽基础

默认的情况下，引入的组件，开始标签和结束标签之间不可以添加内容（如果添加了也会被忽略）。

插槽可以用来扩展组件的自定义能力，例如我们可以创建一个MyButton的自定义按钮，然后通过插槽来定义内部的文本。

 1 <!-- MyButton.vue -->
 2 <template>
 3     <div>
 4         <slot></slot>
 5     </div>
 6 </template>
 7 <!-- app.vue -->
 8 <template>
 9     <my-button>测试文本</my-button>
10 </template>

具名插槽

有的时候一个组件会带有多个插槽，可以为slot标签添加name属性来区分不同的插槽，实例代码如下所示

 1 <!-- Layout.vue -->
 2 <template>
 3     <div>
 4         <header>
 5             <slot name="header"></slot>
 6         </header>
 7         center
 8         <footer>
 9             <slot name="footer"></slot>
10         </footer>
11     </div>
12 </template>

引入组件后，可以通过templat