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

一、插槽

插槽基础

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

插槽可以用来扩展组件的自定义能力，例如我们可以创建一个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>

引入组件后，可以通过template标签指定插槽的属性，实例代码如下所示。

 1 <!-- app.vue -->
 2 <template>
 3