vue题目

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

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

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

题目 2：子向父传递事件

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

---

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

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

1. 在 main.js 中引入 axios，并将其挂载到 Vue.prototype 上，命名为 $axios。

2. 创建一个新组件 DataList.vue，在 created 生命周期中使用 this.$axios.get 请求以下模拟接口地址：

   plaintext

   https://jsonplaceholder.typicode.com/users

3. 将请求返回的用户列表数据存储到组件的 userList 中。

4. 在页面上循环渲染用户列表，只显示 id、name 和 email 三个字段。

5. 处理请求异常，在 catch 中打印错误信息。

6. 

<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）

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

---

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

题目 5：Todo 列表小应用

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

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