面试题：Vue Provide/Inject 条件注入的场景分析与实现

Question

在一个 Vue 电商应用中，商品展示列表组件是多层嵌套结构。现在要求根据用户的会员等级（普通会员、高级会员等），父组件通过 Provide 向子组件注入不同的商品展示模板（如普通会员看到基础模板，高级会员看到豪华模板）。请详细说明实现条件注入的步骤、涉及的数据结构以及代码实现。

Answer 1

实现步骤

1. 父组件设置 Provide：在父组件中通过 provide 选项，根据会员等级提供不同的商品展示模板数据。
2. 子组件使用 Inject：子组件通过 inject 选项接收父组件提供的数据，并根据接收到的数据渲染对应的商品展示模板。

涉及的数据结构

1. 会员等级：可以用字符串表示，如 '普通会员'、'高级会员'。
2. 商品展示模板：可以是对象形式，包含模板相关的配置信息，如 { template: '基础模板', style: '简约风格' }。

代码实现

1. 父组件代码

<template>
  <div>
    <商品展示列表 />
  </div>
</template>

<script>
import 商品展示列表 from './商品展示列表.vue';

export default {
  components: {
    商品展示列表
  },
  data() {
    return {
      memberLevel: '高级会员' // 假设当前为高级会员，可以动态获取
    };
  },
  provide() {
    let displayTemplate;
    if (this.memberLevel === '普通会员') {
      displayTemplate = { template: '基础模板', style: '简约风格' };
    } else if (this.memberLevel === '高级会员') {
      displayTemplate = { template: '豪华模板', style: '华丽风格' };
    }
    return {
      displayTemplate
    };
  }
};
</script>

2. 子组件代码

<template>
  <div v-if="displayTemplate">
    <h1>{{ displayTemplate.template }}</h1>
    <p>{{ displayTemplate.style }}</p>
    <!-- 在此根据模板渲染商品展示 -->
  </div>
</template>

<script>
export default {
  inject: ['displayTemplate']
};
</script>