组件化vue图书购物车

以下是一个简单的组件化Vue图书购物车的示例：

首先，我们需要创建一个Book组件，用于显示每本书的信息和添加到购物车的按钮。在Book组件中，我们需要使用props属性来接收父组件传递的书籍信息，并使用emit方法来向父组件发送添加到购物车的事件。

<template>
  <div class="book">
    <h2>{{ book.title }}</h2>
    <p>作者：{{ book.author }}</p>
    <p>价格：{{ book.price }}</p>
    <button @click="addToCart">添加到购物车</button>
  </div>
</template>

<script>
export default {
  props: {
    book: {
      type: Object,
      required: true
    }
  },
  methods: {
    addToCart() {
      this.$emit('add-to-cart', this.book);
    }
  }
}
</script>

接下来，我们需要创建一个Cart组件，用于显示购物车中的书籍列表和总价。在Cart组件中，我们需要使用props属性来接收父组件传递的购物车信息，并使用computed属性来计算购物车中的总价。

<template>
  <div class="cart">
    <h2>购物车</h2>
    <ul>
      <li v-for="(book, index) in books" :key="index">
        {{ book.title }} - {{ book.price }}
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  props: {
    books: {
      type: Array,
      required: true
    }
  },
  computed: {
    totalPrice() {
      return this.books.reduce((total, book) => total + book.price, 0);
    }
  }
}
</script>

最后，我们需要在父组件中引入Book和Cart组件，并在data属性中定义书籍列表和购物车列表。在父组件中，我们需要使用v-for指令来循环显示每本书，并使用v-on指令来监听Book组件发送的添加到购物车的事件，并将书籍信息添加到购物车列表中。

<template>
  <div>
    <book v-for="(book, index) in books" :key="index" :book="book" @add-to-cart="addToCart"></book>
    <cart :books="cart"></cart>
  </div>
</template>

<script>
import Book from './Book.vue';
import Cart from './Cart.vue';

export default {
  components: {
    Book,
    Cart
  },
  data() {
    return {
      books: [
        { title: 'Vue.js实战', author: '梁灏', price: 68 },
        { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas', price: 89 },
        { title: 'CSS揭秘', author: 'Lea Verou', price: 59 }
      ],
      cart: []
    }
  },
  methods: {
    addToCart(book) {
      this.cart.push(book);
    }
  }
}
</script>