vue三种插槽的区别,vue的插槽

插槽

Vue的组件是高级的自定义标签，我们可以像这样去使用一个叫myCom的组件，而组件中的内部并不像html标签那样写在标签内，而是写在myCom组件内的complate模板中，如果我们在中写内容的话是不会显示到页面这种的，如果我们非要在自定义便签中添加内容，比如说Hello,我想让hello在组件中显示出来，那么我们就要用到插槽。

<my-com>Hello</my-com> <my-com>World</my-com>

如何使用插槽？
我们在子组件的模板内添加slot,内部放默认内容，相当于申请了一块位置

template: ` <div> <button> <slot :a="subMsg" name="default">默认内容{{subMsg}}</slot> </button> <div> <slot :sub="subMsg" name="slot2" :test="1">默认内容2</slot> </div> </div> `

有了位置以后，组件标签内的内容就可以填充到默认位置当中
如果不想默认的排放数据，我们可以自定义模板将内容放到插槽中

<template #default> <div> 123 </div> </template>

如果没写属性，则默认属性为v-slot=default表示默认，这就是默认插槽
如果写了属性指定slot名字，则为具名插槽，该内容也会放到指定的插槽中
==========================================================
没有名字的插槽 --默认插槽

<slot>123</slot> <slot name="default">123</slot>

具有名字插槽 --具名插槽

<slot name="test">123</slot>

如果自定义模板没有指定插槽，那么他会默认放到插槽中，
如果指定了插槽，正则将会放到对应的插槽中

指定插槽

<my-com> <template v-slot:default> hello </template> <template v-slot:test> 123 </template> <template #test> 123 </template> </my-com> 总结

插槽能让我们在组件标签内填充内容，相当于组件是一个电影院，电影院内有可以放很多椅子（插槽），来看电影的人（自定义模板）找位置坐下，如果是默认的自定义模板，则按默认规则入座，如果是指定了插槽的，则按对应的插槽入座。