面试题：Vue插槽结合动态组件实现复杂布局

Question

假设有一个页面布局需求，需要在不同的条件下展示不同的组件结构。例如，当用户处于登录状态时，展示包含用户信息的复杂卡片布局；未登录时，展示简单的登录提示布局。请使用Vue插槽和动态组件来设计并实现这个功能，阐述设计思路并给出主要代码片段。

Answer 1

设计思路

1. 使用动态组件：根据用户登录状态动态切换要显示的组件。在Vue中，可以通过is指令来实现动态组件的渲染。
2. Vue插槽：用于在组件内部提供可复用的内容区域，以便在不同场景下填充不同的内容。例如，在用户信息卡片组件中，插槽可用于放置用户特定的信息片段。

主要代码片段

1. 定义组件：
   • 登录提示组件LoginPrompt.vue：

<template>
  <div>请登录以查看更多内容</div>
</template>

- 用户信息卡片组件`UserInfoCard.vue`：

<template>
  <div class="user - info - card">
    <h2>用户信息</h2>
    <slot name="user - name"></slot>
    <slot name="user - email"></slot>
  </div>
</template>

2. 在父组件中使用动态组件和插槽：

<template>
  <div>
    <component :is="isLoggedIn? 'UserInfoCard' : 'LoginPrompt'">
      <template v - if="isLoggedIn" v - slot:user - name>{{ user.name }}</template>
      <template v - if="isLoggedIn" v - slot:user - email>{{ user.email }}</template>
    </component>
  </div>
</template>

<script>
import LoginPrompt from './LoginPrompt.vue';
import UserInfoCard from './UserInfoCard.vue';

export default {
  components: {
    LoginPrompt,
    UserInfoCard
  },
  data() {
    return {
      isLoggedIn: true, // 假设初始为登录状态
      user: {
        name: '张三',
        email: '[e-mail]'
      }
    };
  }
};
</script>

上述代码实现了根据isLoggedIn状态动态展示不同组件，并且在UserInfoCard组件中通过插槽传递用户信息。