面试官问我vue写过什么组件

当面试官问你“Vue写过什么组件”时，你可以从1、核心组件、2、自定义组件和3、实用性组件三个方面来回答。核心组件包括常见的Vue内置组件，如<router-view>和<router-link>，自定义组件则是你根据需求开发的特定功能组件，实用性组件则指在项目中频繁使用的通用组件，如表单、弹窗等。在回答的同时，具体描述每个组件的用途、实现方法及在项目中的应用场景。

一、核心组件

1、Vue Router组件

在大型单页面应用程序（SPA）中，路由管理至关重要。Vue Router提供了<router-view>和<router-link>组件来简化路由配置和导航。

：这是一个占位符组件，表示应用程序中的路由出口。每当路由变化时，Vue Router会动态渲染相应的组件。
：用于创建导航链接，类似于HTML中的<a>标签，但它具有更强大的功能，比如控制是否触发路由过渡动画。

<template>
  <div>
    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

2、Vuex组件

Vuex是Vue.js的状态管理模式。它主要通过mapState、mapGetters、mapActions和mapMutations这四个组件函数来帮助管理应用状态。

mapState：将Vuex的state映射到组件的computed属性中。
mapGetters：将Vuex的getter映射到组件的computed属性中。
mapActions：将Vuex的action映射到组件的methods中。
mapMutations：将Vuex的mutation映射到组件的methods中。

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment']),
    ...mapMutations(['decrement'])
  }
};

二、自定义组件

1、表单输入组件

自定义表单输入组件可以提高代码的可复用性和可维护性。一个常见的表单输入组件可能包括输入框、下拉菜单和按钮。

<template>
  <div>
    <label :for="id">{{ label }}</label>
    <input :id="id" :type="type" v-model="value" />
  </div>
</template>
<script>
export default {
  props: {
    id: String,
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    value: [String, Number]
  }
};
</script>

2、数据表格组件

数据表格组件用于显示和管理表格数据，可以包含排序、筛选和分页等功能。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    columns: Array,
    rows: Array
  }
};
</script>

三、实用性组件

1、模态框组件

模态框组件在各种应用中非常常见，用于显示提示信息或获取用户输入。

<template>
  <div v-if="isVisible" class="modal">
    <div class="modal-content">
      <span class="close" @click="close">&times;</span>
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isVisible: Boolean
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
.modal { /* 样式代码 */ }
.modal-content { /* 样式代码 */ }
.close { /* 样式代码 */ }
</style>

2、通知组件

通知组件用于向用户显示临时消息，如成功、错误或警告提示。

<template>
  <div v-if="isVisible" class="notification" :class="type">
    <p>{{ message }}</p>
    <button @click="close">Close</button>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'info'
    },
    message: String,
    isVisible: Boolean
  },
  methods: {
    close() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
.notification { /* 样式代码 */ }
.notification.info { /* 样式代码 */ }
.notification.error { /* 样式代码 */ }
</style>

总结与建议

总结来看，回答面试官关于“Vue写过什么组件”的问题时，可以从核心组件、自定义组件和实用性组件三个方面入手，具体描述你开发的组件类型、用途和实现方法。这样不仅展示了你对Vue的熟悉程度，还能体现你的实际开发经验。建议在面试前准备好具体实例和代码片段，以便更详细地说明你的能力和经验。