vue题目 - 技术栈

一、基础题（组件基础 + 父子通讯）

题目 1：父子组件数据传递

创建一个父组件 Father.vue，内部包含一个子组件 Son.vue。
父组件 data 中定义：message: '我是父组件的数据'，通过 props 传递给子组件。
子组件接收 message 并在页面上显示，同时给 message 设置类型校验和默认值 '默认消息'。
给父子组件分别设置不同的背景色，便于区分结构。

题目 2：子向父传递事件

在 Son.vue 中添加一个按钮，点击时触发 sendMsg 方法。
sendMsg 方法通过 $emit 向父组件发送一个事件 send-event，并携带参数 '子组件发来的消息'。
父组件监听 send-event 事件，接收参数并将其赋值给 receivedMsg，最后在页面显示 收到的消息：xxx。

二、进阶题（Axios 请求 + 跨组件数据共享）

题目 3：全局挂载 Axios 并请求数据

在 main.js 中引入 axios，并将其挂载到 Vue.prototype 上，命名为 $axios。
创建一个新组件 DataList.vue，在 created 生命周期中使用 this.$axios.get 请求以下模拟接口地址：

plaintext
复制代码
```
https://jsonplaceholder.typicode.com/users
```
将请求返回的用户列表数据存储到组件的 userList 中。
在页面上循环渲染用户列表，只显示 id、name 和 email 三个字段。
处理请求异常，在 catch 中打印错误信息。

javascript 复制代码

<template>
  <div class="data-list">
    <h2>用户列表</h2>
    <div v-for="user in userList" :key="user.id" class="item">
      <p>编号：{{ user.id }}</p>
      <p>姓名：{{ user.name }}</p>
      <p>邮箱：{{ user.email }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "DataList",
  data() {
    return {
      userList: [] // 存放用户列表
    };
  },
  created() {
    // 生命周期：组件创建后立即请求数据
    this.getData();
  },
  methods: {
    async getData() {
      try {
        // 使用全局挂载的 $axios
        let res = await this.$axios.get(
          "https://jsonplaceholder.typicode.com/users"
        );
        this.userList = res.data;
        console.log("请求成功", this.userList);
      } catch (err) {
        // 异常处理
        console.log("请求失败", err);
      }
    }
  }
};
</script>

<style scoped>
.data-list {
  padding: 20px;
}
.item {
  border: 1px solid #eee;
  margin: 10px 0;
  padding: 10px;
}
</style>

题目 4：祖孙组件通讯（Provide/Inject）

在最顶层 App.vue 中定义 provide，提供一个对象 { appName: '我的Vue练习项目', version: '1.0' }。
创建一个深层子组件 GrandChild.vue，通过 inject 接收 appName 和 version。
在 GrandChild 页面中显示：当前项目：{appName}，版本：{version}。

三、综合题（完整业务流程）

题目 5：Todo 列表小应用

实现一个迷你 Todo 记事本，包含以下功能：

组件拆分 ：
- TodoInput.vue：输入框 + 添加按钮，负责输入新任务。
- TodoList.vue：展示任务列表，包含删除单个任务的功能。
- TodoFooter.vue：显示总任务数和 "清空所有" 按钮。
数据管理 ：
- 在 App.vue 中统一管理 todoList 数组（初始可从 /todos 接口获取，或本地模拟）。
- 通过 props 将 todoList 传给 TodoList 和 TodoFooter。
事件通讯 ：
- TodoInput 点击添加时，通过 $emit 通知 App 新增一条任务。
- TodoList 点击删除时，通过 $emit 通知 App 删除对应 id 的任务。
- TodoFooter 点击清空时，通过 $emit 通知 App 清空 todoList。
接口请求 ：
- 页面加载时，App 组件通过 $axios.get('https://jsonplaceholder.typicode.com/todos') 获取初始数据。
- 只展示 userId=1 的前 5 条数据。