vue实现增删改查

Vue可以通过使用组件化的思想来实现增删改查的功能。

首先，需要定义一个组件来显示数据列表，例如：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>
            <button @click="edit(item)">Edit</button>
            <button @click="remove(item.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>

    <button @click="add">Add</button>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true
    }
  },
  methods: {
    add() {
      // TODO: add new item to the list
    },
    edit(item) {
      // TODO: edit an existing item
    },
    remove(id) {
      // TODO: remove an item from the list
    }
  }
};
</script>

然后，在父组件中，可以通过调用子组件的方法来实现增删改查的功能。例如：

<template>
  <div>
    <item-list :items="items" ref="itemList"></item-list>
  </div>
</template>

<script>
import ItemList from "./ItemList.vue";

export default {
  components: {
    ItemList
  },
  data() {
    return {
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" }
      ]
    };
  },
  methods: {
    addItem() {
      // call addItem method of the ItemList component
      this.$refs.itemList.add();
    },
    editItem(item) {
      // call editItem method of the ItemList component
      this.$refs.itemList.edit(item);
    },
    removeItem(id) {
      // call removeItem method of the ItemList component
      this.$refs.itemList.remove(id);
    }
  }
};
</script>

这样，在父组件中就可以通过调用子组件的方法来实现增删改查的功能了。