vue3中如何编写一个组件---demo

当使用 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 列表，并显示每个待办事项及其对应的删除按钮。

这样，我们就完成了一个简单的待办事项列表组件的开发。在其他地方使用该组件时，只需要引入并放置在相应的位置即可。组件内部的数据和方法已经封装好，可以在不同的上下文中使用和传递。

vue3中如何编写一个组件---demo

猜你喜欢