详解Vue学习笔记入门篇之组件的内容分发(slot)

将html部分代码修改为以下代码:

<div id="app">
  <h1>我是父组件的标题</h1>
  <my-component>
  </my-component>
</div>

则运行结果如下:

具名slot

‘slot’ 元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。

如以下例子：

<div id="app">
  <my-component>
    <h1 slot="header">这是标题</h1>
    <p>第一个段落</p>
    <p>第二个段落</p>
    <p>第三个段落</p>
    <p slot="footer">联系信息</p>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  <div>
`,
})
new Vue({
  el:'#app'
})

运行结果如下:

在组合组件时，内容分发 API 是非常有用的机制。

作用域插槽

2.1.0新增

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。

在子组件中，只需将数据传递到插槽，就像你将 props 传递给组件一样。

示例代码:

<div id="app">
  <my-component>
    <template scope="props">
      <p>hello from parent</p>
      <p>{{props.text}}</p>
    </template>
  </my-component>
</div>

Vue.component('my-component',{
  template:`
  <div class="child">
    <slot text="hello from child"></slot>
  <div>
`,
  props:['text']})
new Vue({
  el:'#app'
})

运行结果：

在父级中，具有特殊属性 scope 的 <‘template’> 元素必须存在，表示它是作用域插槽的模板。scope 的值对应一个临时变量名，此变量接收从子组件中传递的 props 对象。