Vue引用组件

• 组件创建

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

<script>
  export default {
    name: "SoltTem"
  }
</script>

<style scoped>
.container {
  background-color: #42b983;
}
.container header {
  color: aqua;
}
</style>

引用

<template>
  <div class="app">
    <SoltTem>
        <template v-slot:header>
          123
        </template>
        <template v-slot:main>
          <h2>13123</h2>
        </template>
      <template v-slot:foot>
        4449
      </template>
    </SoltTem>
  </div>
</template>
<script>

  import SoltTem from "../components/soltTem";

  export default {
    name: 'App',
    components: {SoltTem},
    data() {
      return {
        component: {
          SoltTem
        }
      }
    }
  }
</script>

目录

 效果