slot插槽分发

最新推荐文章于 2022-02-15 19:26:39 发布

agwq1908

最新推荐文章于 2022-02-15 19:26:39 发布

阅读量184

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lujunan/p/11092510.html

本文深入解析Vue.js中具名slot的使用方法，包括如何通过name属性配置内容分发，以及父组件如何覆盖子组件的默认内容。展示了具名slot如何匹配特定特性元素，实现组件间信息的灵活传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://www.cnblogs.com/qq735675958/p/8377761.html

 1 具名slot
 2 
 3 <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素
 4 
 5 
 6 var childNode = {
 7  template: `
 8  <div class="child">
 9  <p>子组件</p>
10  <slot name="my-header">头部默认值</slot>
11  <slot name="my-body">主体默认值</slot>
12  <slot name="my-footer">尾部默认值</slot>
13  </div>
14  `,
15 };
16 
17 var parentNode = {
18  template: `
19  <div class="parent">
20  <p>父组件</p>
21  <child>
22   <p slot="my-header">我是头部</p>
23   <p slot="my-footer">我是尾部</p>
24  </child>
25  </div>
26  `,
27  components: {
28  'child': childNode
29  },
30 };ps:父组件中利用到的部分就会优先展示父级的信息，否则默认展示子组件的信息；

 1 // 子组件 --slot常用的方式
 2 <template>
 3   <div class="slot-child">
 4 　　　//在子组件中添加slot标签
 5       <slot></slot>
 6       我是slot的子组件
 7   </div>
 8 </template>
 9 
10 <script>
11 export default {
12   name: 'slotChild',
13   data () {
14     return {
15       
16     }
17   }
18 }
19 </script>
20 
21 此时你将这个组件引入到父组件之后，你就可以在
22 <slot-child>
23     <div>我就可以在组件内部填充，如果子组件内没写slot，是无法在父页面中展示dom的。<div/>  ps:子组件slot的位置就是插槽的位置。
24 <slot-child/>