插槽slot

Posted 2021-02-20 lss0322

查阅vue官网汇总关于插槽的使用方法介绍，方便日后查阅~

1.插槽内可以包含任何模板代码，包括 html甚至其它的组件；

2.如果子组件没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

一、默认slot

当子组件中的slot中有默认值时，父组件不提供任何插槽内容时插槽内容将被显示；如果父组件提供内容则这个提供的内容将会被渲染从而取代子组件中插槽默认内容

子组件child.vue

 

1 <template>
2   <div class="main">
3     <button type="submit">
4         <slot>确定</slot>
5     </button>
6   </div>
7 </template>

 

父组件father.vue，不提供内容时

1 <template>
2   <div class="main">
3     <child></child>
4   </div>
5 </template>

效果：

父组件father.vue，提供内容时

1 <template>
2   <div class="main">
3     <child>下一步</child>
4   </div>
5 </template>

效果：

 

二、具名插槽

子组件child.vue

1 <template>
2   <div class="main">
3     <div>左侧内容</div>
4     <div>
5         <p>右侧内容</p>
6         <slot name="right"></slot>
7     </div>
8   </div>
9 </template>

 

父组件father.vue

自 2.6.0 起有所更新。已废弃的使用 slot用法：

1 <template>
2   <div class="main">
3     <child>
4       <div slot="right">
5         <button>点击</button>
6       </div>
7     </child>
8   </div>
9 </template>

更新后的用法：

1 <template>
2   <div class="main">
3     <child>
4       <template v-slot:right>
5         <button>点击</button>
6       </template>
7     </child>
8   </div>
9 </template>

注意：

1.当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样可以把 v-slot 直接用在组件上，除此之外v-slot 只能添加在 <template> 上 ；

2.v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:right 可以被重写为 #right

 

三、作用域插槽

　　使用场景：父组件对子组件内容加工处理；

　　借用官网的例子来记录：

　　实现效果：想换掉备用内容，用名而非姓来显示

子组件current-user.vue中：

1 <span>
2   <slot>{{ user.lastName }}</slot>
3 </span>

父组件中：

1 <current-user>
2   <template v-slot:default="slotProps">
3     {{ slotProps.user.firstName }}
4   </template>
5 </current-user>

注意：
1.v-slot:default="slotProps" 也可以缩写成v-slot="slotProps"；
2.默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确；