008-slot插槽-插槽 slot 的简单使用

app.vue 文件引入 Son.vue 组件：

<template>
  <div id="app">
    app component
    <Son>
      <div class="slot-contant">插槽内容</div>
    </Son>
  </div>
</template>

<script>
import Son from './components/SlotComponents/Son'
export default {
  name: 'App',
  components: { Son }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #4a90e2;
  color: #fff;
  padding: 20px;
}
.slot-contant {
  color: #f00;
  font-size: 16px;
}
</style>

Son.vue文件内容：

<template>
  <div class="son-component">
    son header
    <slot />
    son footer
  </div>
</template>
<script>
export default {}
</script>
<style scoped>
.son-component {
  width: 200px;
  height: 200px;
  padding: 20px;
  background: #ccc;
  border: 1px solid #ccc;
}
</style>

页面展示效果：