当使用 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 列表,并显示每个待办事项及其对应的删除按钮。
这样,我们就完成了一个简单的待办事项列表组件的开发。在其他地方使用该组件时,只需要引入并放置在相应的位置即可。组件内部的数据和方法已经封装好,可以在不同的上下文中使用和传递。
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net