插槽

Vue实现了一套内容分发的API，将元素作为承载分发内容的出口。

1.内容分发

例如有一个模板为以下格式的Card.vue的组件

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
    props: {
      title: {
        type: String,
      default: ''
    },
    content: {
        type: String,
      default: ''
    }
  }
}
</script>

当card.vue在其他页面调用时,card见的内容将替换slot。

<template>
    <div>
    <card>
          自定义内容
      </card>
  </div>
</template>
<script>
import Card from 'Card.vue'
export default {
    components: {
   Card
  }
}
</script>

2.作用域

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父级模板无法访问子组件中的属性。

3.插槽默认值

在没有提供内容时，为插槽设置默认值是很有用的。

<template>
  <div>
    <h1>{{ title }}</h1>
    <div>
      <slot>插槽默认值</slot>
    </div>
  </div>
</template>

4.命名插槽

有时候组件内部 需要多个插槽，为了区分不同的插槽进行分发，需要slot额外的属性来标识，对于这样的情况slot元素有一个特殊的name属性。

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

不带name的slot出口带有隐含的名字default