Vue组件化中,当咱们在设计一个组件的时候,可能会保留一部分,让使用者自定义的内容,好比:vue
在这种场景下,把保留给使用者的部分,叫作插槽(slot)组件化
理解:设计
default
的插槽写法:code
//自定义组件中 <template> <div> <slot><slot>//匿名插槽 </div> </template> //页面(使用者)使用 <template> <div> <myComponent><p>我被放进了插槽中</p></myComponent> </div> </template>
代码中我被放进了插槽中
这句话,就进入了自定义组件的匿名插槽中,从而变成了ip
//自定义组件中 <template> <div> <div> <p>我被放进了插槽中</p><!-- 匿名插槽中放入了内容 --> </div> </div> </template>
理解:所谓具名插槽,就是这个插槽里,这个插槽被命了名,使用者放进来的东西,声明了插槽的名称,会被分发进这个具名插槽中。
写法:使用template
标签声明具名插槽
名称<template v-slot:插槽名></template>
作用域
//自定义组件中 <template> <div> <div class='slot1'> <slot name='slot1'><slot><!-- 名为“slot1”的具名插槽 --> </div> <div class='slot2'> <slot name='slot2'><slot><!-- 名为“slot2”的具名插槽 --> </div> <slot><slot>//这里是个匿名插槽 </div> </template> //页面(使用者)使用 <template> <div> <myComponent> <template v-slot:slot1> <p>名为slot1的具名插槽中</p> </template> <a>啦啦啦啦德玛西亚</a> <template v-slot:slot2> <p>名为slot2的具名插槽中</p> </template> <p>啦啦啦啦德玛西亚</p> </myComponent> </div> </template>
代码被分发到对应插槽后的内容编译
//自定义组件中 <template> <div> <div class='slot1'> <div> <p>名为slot1的具名插槽中</p> </div> </div> <div class='slot2'> <div> <p>名为slot2的具名插槽中</p> </div> </div> <div> <a>啦啦啦啦德玛西亚</a> <p>啦啦啦啦德玛西亚</p> </div> </div> </template>
理解:一种可以将子组件可用的内容暴露给父组件的插槽。
好比:咱们有的时候,须要一些子组件里的东西,作内容拼接,就像一个用户名输入框,咱们但愿全部的用户名,都跟随一个user_
的前缀,此处就能够使用到做用域插槽class
//自定义组件中 <template> <div> <slot :user='username'><slot>//匿名插槽 </div> </template> <script> export default { data(){ return { username:{ prefix:"user_" } } } } </script> //页面(使用者)使用 <template> <div> <myComponent v-slot='obj'> {{obj.user.prefix}}小寒大人 </myComponent> </div> </template>
编译后的结果就变成了分享
<template> <div> <div> user_小寒大人 </div> </div> </template>
插槽是拥有默认值功能的,若是对应的slot没有传入内容,则会使用slot的默认值di
以匿名参数为例
//自定义组件中 <template> <div> <slot><p>这里是默认的内容</p></slot> </div> </template> //页面(使用者)使用 <template> <div> <myComponent></myComponent> <myComponent>替换了</myComponent> </div> </template>
最终表现结果为
<template> <div> <div> <p>这里是默认的内容</p> </div> <div> 替换了 </div> </div> </template>
能够使用动态值来定某些内容进入某些具名插槽中
正常的具名插槽为v-slot:插槽名
,动态的写法为v-slot:[dynamicSlotName]
,此写法仅在vue2.6.0后的vue中版本使用
正常的具名插槽为v-slot:插槽名
,简写的写法为#插槽名
,此写法仅在vue2.6.0后vue中版本使用