Fork me on GitHub

vue使用slot分发内容

发表于 | 分类于
字数统计: 499 | 阅读时长 ≈ 2
当需要让组建组合使用，混合父组件的内容与子组件的模版时，就会用到slot，这个过程叫内容分发（transclusion）

以<app>为例，它有两个特点：

  • <app>组件不知道它的挂载点会有什么内容。挂载点的内容是由<app>的父组件决定的。
  • <app>组件可能有它自己的模板

props传递数据，events触发事件和slot内容分发就构成了Vue组件的3个API来源，再复杂的组建也是由这三个部分组成。

slot用法

单个slot

在子组件内使用特殊的<slot>元素可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的<slot>标签及它的内容，实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="app">
    <child-component>
        <p>分发的内容</p>
        <p>更多分发的内容</p>
    </child-component>
</div>
<script>
    Vue.component('child-component',{
        template: `<div>
    <slot>
        <p>如果父组件没有插入内容，我将作为默认出现</p>
    </slot>
</div>`
    })
    var app = new Vue({
        el: '#app'
    })
</script>

子组件的模板内定义了一个<slot>元素，并用一个p作为默认的内容，在父组件没有使用slot时，会渲染这段默认的文本；如果写入了<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
<div id="app">
    <child-component>
      <p>正文内容</p>
      <p>更多正文内容</p>
      <div slot="footer">底部信息</div>
      <h2 slot="header">标题</h2>
    </child-component>
</div>
<script>
  Vue.component('child-component', {
  template: 
  `<div class="container">
    <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>

子组件内声明了3个<slot>元素，其中在<div class="main">内的<slot>没有使用name特性，它将作为默认slot出现，父组件没有使用slot特性的元素与内容都将会出现在这里。

演示地址

如果没有指定默认的匿名slot，父组件内多余的内容片段都将会被抛弃。

undefined