51工具盒子Be weird. Your strangeness is your magic.
我们在进行vue开发中，经常会使用到slot插槽
插槽允许我们在父组件引用子组件时，在组件其中放一段可以带标签的元素，甚至放入其他组件等
例如我这里定义一个组件
|---------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | hljs vue <template> <div> <header><slot name="header" :user="user">-------</slot></header> <main><slot :user="user">默认内容</slot></main> <footer><slot name="footer" :user="user">-------</slot></footer> </div> </template> <script> export default { data() { return { user: { name: 'ruben' } }; } }; </script> |
其中包含三个外部标签header、main、footer
我们在父页面外部引用时就可以这么写：
|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 | hljs vue <navigation-link> <template v-slot:header> ----传入头部---- </template> <template v-slot:default="slotProps"> 插槽{{ slotProps.user.name }} </template> <template v-slot:footer> ----传入底部---- </template> </navigation-link> |
这样我们template标签内的内容会根据v-slot指定的插槽名自动匹配上面的name
注意，我这里使用的是新版api，旧版已被废弃，但仍然可使用，感兴趣可以看官方文档
最后渲染出来的效果：
当然这里我每个插槽在组件内定义时都写了默认值，这样就算我们没有传入，也可以使用默认值
这里我们可能还会有一个需求，我们想访问子组件内部的值怎么办？因为我们从父页面传给子组件的插槽的模板引用到的作用域是外部，也就是我们父页面的，此时大家注意到我定义组件时，绑定了一个user标签，指向我们子组件内部的值user
这样，我们在外部使用时就可以像我上方那样，使用v-slot设置一个属性变量，通过它就能访问到子组件内部的值
当你会用这个了之后你还可以使用ES6中变量的解构赋值，省掉我们上面定义slotProps变量这一步骤
而且:default也是可以省略的
这里可以看到我传入的template标签很繁重，其实如果我们只给默认的slot传模板的话，可以简写为下方形式：
|-------------|-------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 | hljs vue <!-- 缩写形式 只能在只有一个slot下使用，如有多个，则需要写全 --> <navigation-link v-slot:header="{ user: person }">缩写{{ person.name }}</navigation-link> |
注意上方我还将user进行了重命名为person
vue官方文档还提到可以使用如下语法设置备选值，用于在user为undefined的时候，但我发现我引入这段代码会编译报错，暂时不是很想去探究，有可能是我的版本问题吧
|-----------|-------------------------------------------------------------------------------------------------------------|
| 1 | hljs vue <navigation-link v-slot="{ user = { name: 'Guest' } }">备用值{{ user.name }}</navigation-link> |
我们在写插槽名的时候，其实可以使用动态插槽名如下，并且v-slot在指定插槽名的时候也可以进行简写为#：
|-----------|------------------------------------------------------------------------------------------------------|
| 1 | hljs vue <navigation-link #[dynamicSlotName]="{ user }">动态插槽{{ user.name }}</navigation-link> |
这里dynamicSlotName在下方定义如下：
最后完整代码如下：
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | hljs vue <template> <div> <div :class="[{ active: active }, isButton ? prefix + '-button' : null]">:class="[{ active: active }, isButton ? prefix + '-button' : null]"</div> <div :class="{ active, [`${prefix}-button`]: isButton }">:class="{ active, [`${prefix}-button`]: isButton }"</div> <hello-world msg="Hello World"></hello-world> <div v-html="'<div class=\'ruben-html\'>我是富文本</div>'"></div> <navigation-link> <template v-slot:header> ----传入头部---- </template> <template v-slot:default="slotProps"> 插槽{{ slotProps.user.name }} </template> <template v-slot:footer> ----传入底部---- </template> </navigation-link> <navigation-link> <template v-slot="{ user }"> 解构{{ user.name }} </template> </navigation-link> <!-- 缩写形式 只能在只有一个slot下使用，如有多个，则需要写全 --> <navigation-link v-slot:header="{ user: person }">缩写{{ person.name }}</navigation-link> <!-- <navigation-link v-slot="{ user = { name: 'Guest' } }">备用值{{ user.name }}</navigation-link> --> <navigation-link #[dynamicSlotName]="{ user }">动态插槽{{ user.name }}</navigation-link> </div> </template> <script> import HelloWorld from '@/components/HelloWorld.vue'; import NavigationLink from '@/components/navigation-link.vue'; export default { components: { HelloWorld, NavigationLink }, data() { return { active: true, isButton: true, prefix: 'ruben', dynamicSlotName: 'footer' }; } }; </script> <style scoped> .hello { text-align: center; } >>> .hello-ruben { color: #f06431; } .hello /deep/ a { color: #0000ee; } >>> .ruben-html { color: #ff0000; } </style> |
