外贸技术家园首先我们来看看slot的用法实例:
单个 Slot
在子组件内使用特殊的<slot>元素就可以为这个子组件添加一个 slot (插槽),在父组件模板里,插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容.示例代码如下:
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <child-component> <p>分发的内容</p> <p>更多分发的内容</p> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: ' <div> <slot> <p>如果父组件没用插入内容,我将作为默认出现</p>\ </slot> </div>' }); var app = new Vue({ el: '#app' }) </script> </body> </html> |
子组件 child-component 的模板内定义一个 <slot> 元素,并且用一个 <p> 作为默认的内容,在父组件没有使用 slot 时,会渲染这段默认的文本;如果写入了 slot ,那就会替换整个 <slot>.所以上列渲染后的结果为:
|
1 2 3 4 5 6 |
<div id="app"> <div> <p>分发的内容</p> <p>更多分发的内容</p> </div> </div> |
注意:子组件<slot>内的备用内容,它的作用域时子组件本身.
具名 Slot
给 <slot> 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:
具名 Slot
给 <slot> 元素指定一个 name 后可以分发多个内容,具名 Slot 可以与单个 Slot 共存,例如下面的示例:
|
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 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例</title> </head> <body> <div id="app"> <child-component> <h2 slot="header">标题</h2> <p>正文内容</p> <p>更多正文内容</p> <div slot="footer">底部信息</div> </child-component> </div> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <script> Vue.component('child-component', { template: ' <div class="component"> <div class="header"> <slot name="header"></slot> </div> <div class="main"> <slot></slot> </div> <div class="footer"> <slot name="footer"></slot> </div> </div>' }); var app = new Vue({ el: '#app' }) </script> </body> </html> |
子组件内声明了3个 <slot> 元素,其中在<div class=”main”>内的<slot> 没用使用 name 特性,它将作为默认 slot 出现,父组件没有使用 slot 特性的元素与内容都将出现在这里.
如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.
上例最终渲染后的结果为:
如果没有指定默认的匿名 slot, 父组件内多余的内容片段都将被抛弃.
上例最终渲染后的结果为:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="app"> <div class="container"> <div class="header"> <h2>标题</h2> </div> <div class="main"> <p>正文内容</p> <p>更多的正文内容</p> </div> <div class="footer"> <div>底部信息</div> </div> </div> </div> |
如果你还没懂的话，接着我们再看一组例子
比如我们再定义一个panel组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Vue.component('panel',{ template:'#panel-tpl', data() { return { title:'这是title', content:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus pariatur ea molestiae alias, illum sed porro neque unde repudiandae. A, perspiciatis vel inventore unde modi reiciendis esse quasi commodi minima!', bottom:'查看详细' } } }) <template id='panel-tpl'> <div class="panel"> <div class="title">{{title}} </div> <div class="content"> {{content}}</div> <div class="bottom"> {{bottom}}</div> </div> </template> |
然后编译后，它会长成这模样:
在 Vue 中,一个组件内部可能会引用另外一个组件.也没什么大不了的.
比如,在定义一个图片组件.
|
1 2 3 4 5 |
Vue.component('img-panel',{ template:'<div><img src="./md/img/1.jpg" width="200px" height="auto" ></div>', }) <img-panel></img-panel> |
它会长成这样子
两个组件(panel & img-panel)都是全局组件.
我希望在 panel 组件里 div.content 里使用 img-panel 组件来填充.
我可能会这么写.
|
1 2 3 4 5 6 7 |
<template id='panel-tpl'> <div class="panel"> <div class="title">{{title}} </div> <div class="content"><img-panel></img-panel></div> <div class="bottom"> {{bottom}}</div> </div> </template> |
两个组件强耦合了在一起，长这样:
现在问题来了
panel 组件的 div.content 这个部分,我是希望用内容填充的.
而不想管内容是什么.
但是这里的代码,我把 img-panel 组件写死到里面去了.
如果后期要换的话,我就得修改这里的代码.
|
1 2 3 4 5 6 7 8 9 |
<template id='panel-tpl'> <div class="panel"> <div class="title">{{title}} </div> <!-- <div class="content"><img-panel></img-panel></div> --> <!-- 不要 img-panel 了,还是显示自己的数据属性叭!!!! --> <div class="content">{{content}}</div> <div class="bottom"> {{bottom}}</div> </div> </template> |
slot 插槽
slot 插槽可以在组件的内容预留一个位置.类似于 placeholder.
在需要的使用,把你需要的任何内容填充进去.
于是,我在 panel里放几个 slot ,只管挖坑,不管填坑(但设置了默认值)
|
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 |
<template id='panel-tpl'> <div class="panel"> <div class="title"> <slot name='title'>{{title}}</slot> </div> <div class="content"> <slot name='content'>{{content}}</slot> </div> <div class="bottom"> <slot name='bottom'> {{bottom}}</slot> </div> </div> </template> Vue.component('title-slot',{ template:`<div style='backgroundColor:red;height:40px'></div>` }) Vue.component('content-slot',{ template:`<div style='background:yellow;height:100px;'></div>` }) Vue.component('bottom-slot',{ template:`<div style='background:black;height:40px'></div>` }) |
panel 组件时,把需要的坑填进去.|
1 2 3 4 5 6 7 |
<div id='app'> <panel> <div slot='title'><title-slot></title-slot></div> <div slot='content'><content-slot></content-slot></div> <div slot='bottom'><bottom-slot></bottom-slot></div> </panel> </div> |
效果如下：
简单总结:
- 在组件内部任意地方使用
<slot name='value'></slot>标签挖坑. - 可以在其内部放置任意数据当成是默认值.
{{title}} {{content}} {{bottom}}- 挖坑语法(组件定义):
<slot name='slotname'>默认值</slot> - 填坑语法(组件使用):
<div slot='slotname'>任意内容(字符串,数据,其他组件等)</div>.. 注意,使用的使用是里用<div slot>而不是<slot>
- 挖坑语法(组件定义):
- 最重要的是,我们可以利用
slot,事先不建立组件和组件之间的依赖关系,完全利用slot这个抽象层,把坑挖好即可.
