使用Vue实现一个基础的图书管理系统，包括图书的增删功能

在Vue中实现一个基础的图书管理系统，我们可以利用Vue的核心特性如组件、数据绑定和事件驱动来构建。这里是一个简单例子，主要包括两个主要组件：图书列表和图书编辑删除组件。

**1. 图书列表组件（BookList.vue）**:

<template>
  <div>
    <h2>图书列表</h2>
    <button @click="addBook">添加图书</button>
    <ul>
      <li v-for="(book, index) in books" :key="index">
        <span>{{ book.title }}</span>
        <button @click="deleteBook(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      books: []
    };
  },
  methods: {
    addBook() {
      // 添加图书方法，这里仅示例，实际会通过API或其他方式增加
      this.books.push({ title: '新书标题' });
    },
    deleteBook(index) {
      this.books.splice(index, 1);
    }
  }
};
</script>

**2. 图书编辑组件（EditBook.vue）**:

<template>
  <form @submit.prevent="updateBook">
    <input v-model="book.title" type="text" placeholder="图书标题">
    <button type="submit">保存</button>
    <button @click="cancel">取消</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      book: {}
    };
  },
  props: {
    bookId: Number
  },
  methods: {
    updateBook() {
      // 更新图书方法，这里仅示例，实际会通过API更新指定ID的图书
      this.$emit('updateBook', this.book);
    },
    cancel() {
      // 取消编辑并清除数据
      this.book = {};
    }
  }
};
</script>

在父组件中，通过`v-bind:props`传递id到编辑组件，然后监听`updateBook`自定义事件来更新列表。

<EditBook :book-id="selectedBook.id" @updateBook="updateSelectedBook"></EditBook>

其中`updateSelectedBook(book)`函数负责将编辑后的数据同步回列表。