VIP20/13_Vue/day-5/code/vue-slot/src/App.vue

<template>
  <div id="app">
    <!-- <NavigationLink url="/profile"> 个人信息 </NavigationLink>
    <NavigationLink url="/profile">
      <span :style="{ color: 'red' }">个人信息</span>
    </NavigationLink>
    <NavigationLink url="/profile"> -->
    <!-- 组件渲染时 内容区域的作用域 是在其 父组件 内-->
    <!-- <span :style="{ color }">个人信息</span>
    </NavigationLink> -->

    <!-- <div>
      <h3>默认插槽</h3> -->
    <!-- 下面 由于在渲染组件时没有指定插槽内容，那么就会使用默认值 -->
    <!-- <MyButton /> -->
    <!-- 如果 指定了，就替换掉 默认值 -->
    <!-- <my-button>保存</my-button> 
    </div>-->
    <MyContainer>
      <template v-slot:header>
        <div :style="{ height: '100%', lineHeight: '50px' }">XXX管理系统</div>
      </template>
      <template v-slot:aside>
        <ul>
          <li>主页</li>
          <li>用户管理</li>
          <li>商品管理</li>
        </ul>
      </template>
      <template v-slot:main>
        <p>欢迎使用 XXX 管理系统！</p>
        <current-user>
          <!-- v-slot指令的绑定值 是固定slot所绑定的所有属性，即一个对象 通常我们命名为 slotProps -->
          <template v-slot:default="slotProps">
            <p>
              {{ slotProps.user.firstName }} - {{ slotProps.user.lastName }}
            </p>
          </template>
        </current-user>

        <current-user>
          <!-- v-slot指令的绑定值 是固定slot所绑定的所有属性，即一个对象 通常我们命名为 slotProps -->
          <!-- slotProps 是一个 对象 ，v-slot指令 是可以在绑定值中使用解构语法 -->
          <template v-slot:default="{ user }">
            <p>当前用户：{{ user.firstName }} {{ user.lastName }}</p>
          </template>
        </current-user>
        <current-user>
          <!-- v-slot指令的绑定值 是固定slot所绑定的所有属性，即一个对象 通常我们命名为 slotProps -->
          <!-- slotProps 是一个 对象 ，v-slot指令 是可以在绑定值中使用解构语法 -->
          <!-- 如果 插槽的名字 为 default 那么是有简写的方式。即可以省略:default -->
          <template v-slot="{ user }">
            <p>当前用户：{{ user.firstName }} - {{ user.lastName }}</p>
          </template>
        </current-user>
      </template>
    </MyContainer>
  </div>
</template>

<script>
import CurrentUser from './components/CurrentUser.vue';
// import MyButton from './components/MyButton.vue';
// import NavigationLink from './components/NavigationLink.vue';

export default {
  components: { CurrentUser },
  name: 'App',
  data() {
    return {
      color: 'hotpink',
    };
  },
  // components: { NavigationLink, MyButton },
};
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
</style>