- 前提:直接在组件中添加HTML节点是不会显示的,这个时候只有在组件中添加了插槽才会可以在组件中显示添加的节点信息。例如:
- <template-button><h1>如果组件中没有添加插槽slot这个标题不会显示</h1></template-button>
- 但是如果在定义</template-button>组件的时候,在里面添加了slot插槽,则h1会显示在插槽的位置,
- 注意:
- 一个组件中可以放多个插槽,但是这个插槽必须与自己的属性name="sloatname"值,之后再组件中的接单中用slot="sloetname"来确定节点出现的位置
- slot存在的意义:是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中<slot>位置),当插槽也就是坑<slot name=”mySlot”>有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;
- 作用域插槽:是用于父组件获取子组件的数据用的
- 在Vue2.6以上开始用v-slot来代替slot和slot-scope的用发,v-slot只可以用在一个template中,可以参考Vue教程讲解的非常明白
Vue插槽slot的使用
最新推荐文章于 2024-05-13 10:16:48 发布