vue组件化 购物车

Vue组件化购物车可以分为三个组件：Cart、CartList和CartTitle。其中，Cart是父组件，CartList和CartTitle是子组件。Cart组件负责渲染整个购物车，CartList组件负责渲染购物车中的商品列表，CartTitle组件负责渲染购物车的标题。

具体实现步骤如下：
1.在HTML中引入Vue.js和购物车组件的JS文件。

2.在HTML中创建一个div元素，作为购物车组件的容器。

3.在JS文件中定义CartTitle组件，代码如下：

var CartTitle = {
  props: ['name'],
  template: `
    <div class="title">{{name}}的商品</div>
  `
};

4.在JS文件中定义CartList组件，代码如下：

var CartList = {
  props: ['list'],
  template: `
    <div>
      <div v-for="item in list" :key="item.id" class="item">
        <img :src="item.img"/>
        <div class="name">{{item.name}}</div>
        <div class="price">{{item.price}}</div>
      </div>
    </div>
  `
};

5.在JS文件中定义Cart组件，代码如下：

var Cart = {
  data: function() {
    return {
      name: '我的购物车',
      list: [
        { id: 1, name: '商品1', price: 100, img: 'img1.jpg' },
        { id: 2, name: '商品2', price: 200, img: 'img2.jpg' },
        { id: 3, name: '商品3', price: 300, img: 'img3.jpg' }
      ]
    };
  },
  components: {
    'cart-title': CartTitle,
    'cart-list': CartList
  },
  template: `
    <div class="cart">
      <cart-title :name="name"></cart-title>
      <cart-list :list="list"></cart-list>
    </div>
  `
};

6.在JS文件中创建Vue实例，并将Cart组件挂载到购物车容器中，代码如下：

new Vue({
  el: '#cart-container',
  components: {
    'cart': Cart
  },
  template: '<cart></cart>'
});

相关问题：