自定义Book组件，组合式API形式 变量：书名、作者、单价，购买数量 函数：统计购买书籍的总价。 页面显示 书名、非者、单价，购买数量， 第一个 涨价按钮，单击后可单价+10 第二个 统计按钮，alert输出买书的总金额。

在Vue中，我们可以按照以下步骤创建一个包含书名、作者、单价、购买数量以及相应功能的Book组件，使用组合式API：

首先，定义组件结构：

<template>
  <div class="book-component">
    <h3>书名: {{ book.title }}</h3>
    <p>作者: {{ book.author }}</p>
    <p>单价: {{ book.price }}</p>
    <input type="number" v-model="book.quantity" :min="1" placeholder="购买数量">
    
    <button @click="increasePrice">涨价 +10元</button>
    <button @click="calculateTotal">计算总价</button>
    <p>总价: {{ totalAmount }}</p>
  </div>
</template>

然后，在script标签中添加组件的逻辑：

<script>
export default {
  data() {
    return {
      book: {
        title: '',
        author: '',
        price: 0, // 初始单价假设为0
        quantity: 1, // 购买数量初始为1
      },
      totalAmount: 0, // 存储总价
    };
  },
  methods: {
    increasePrice() {
      this.book.price += 10;
    },
    calculateTotal() {
      this.totalAmount = this.book.price * this.book.quantity;
      alert(`购买 ${this.book.title} 的总价是：${this.totalAmount} 元`);
    },
  },
};
</script>

这个组件接受三个外部传入的数据作为`props`：书名、作者和单价，其余的如购买数量、价格变动和总价计算则是在组件内部处理的。