当使用 Vue 3 来开发组件时，可以使用 Composition API 来定义组件逻辑和实现组件传值。下面是一个详细的 Vue 3
组件示例和讲解：
假设我们要开发一个简单的待办事项列表组件，包括添加待办事项、显示待办事项列表以及删除待办事项的功能。
在 TodoList.vue 文件中：
<template><div><input type="text" v-model="newTodo" placeholder="输入待办事项"><button @click="addTodo">添加</button><ul><li v-for="(todo, index) in todos" :key="index">{{ todo }}<button @click="deleteTodo(index)">删除</button></li></ul></div>
</template><script>
import { ref } from 'vue';export default {name: 'TodoList',setup() {// 使用 ref 创建响应式数据const newTodo = ref('');const todos = ref([]);// 添加待办事项const addTodo = () => {if (newTodo.value) {todos.value.push(newTodo.value);newTodo.value = '';}};// 删除待办事项const deleteTodo = (index) => {todos.value.splice(index, 1);};// 暴露数据和方法给模板使用return {newTodo,todos,addTodo,deleteTodo,};},
};
</script>在上面的示例中，我们使用了 Vue 3 的 Composition API 来编写组件。主要包括以下几个部分：
- 使用
ref函数创建响应式数据：我们使用 ref 函数创建了newTodo和todos两个响应式数据，分别用于存储用户输入的待办事项和待办事项列表。 - 定义添加待办事项的方法：我们定义了
addTodo方法，该方法会在用户点击“添加”按钮时被触发。它会将newTodo的值添加到todos列表中，并清空输入框的值。 - 定义删除待办事项的方法：我们定义了 deleteTodo 方法，该方法会在用户点击“删除”按钮时被触发。它会根据传入的索引从 todos列表中移除对应的待办事项。
- 在模板中使用响应式数据和方法：在模板中，我们使用了 v-model 来实现输入框与 newTodo的双向绑定，使用户输入的值能够同步更新。使用 v-for 循环遍历 todos 列表，并显示每个待办事项及其对应的删除按钮。
这样，我们就完成了一个简单的待办事项列表组件的开发。在其他地方使用该组件时，只需要引入并放置在相应的位置即可。组件内部的数据和方法已经封装好，可以在不同的上下文中使用和传递。
