前端笔记Vue项目day3(八）

 

4.   实现组件更新数据功能  上

• 将输入框中的默认数据动态渲染出来

• 输入框失去焦点的时候 更改商品的数量

• 子组件中不推荐操作数据 把这些数据传递给父组件 让父组件处理这些数据

• 父组件中接收子组件传递过来的数据并处理

• [mw_shl_code=applescript,true]<div id="app">
      <div class="container">
        <my-cart></my-cart>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      
      var CartTitle = {
        props: ['uname'],
        template: `
          <div class="title">{{uname}}的商品</div>
        `
      }
      var CartList = {
        props: ['list'],
        template: `
          <div>
            <div :key='item.id' v-for='item in list' class="item">
              <img :src="item.img"/>
              <div class="name">{{item.name}}</div>
              <div class="change">
                <a href="">－</a>
                                  # 1. 将输入框中的默认数据动态渲染出来
                                  # 2. 输入框失去焦点的时候 更改商品的数量  需要将当前商品的id 传递过来
                <input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)'/>
                <a href="">＋</a>
              </div>
              <div class="del" @click='del(item.id)'>×</div>
            </div>
          </div>
        `,
        methods: {
          changeNum: function(id, event){
            # 3 子组件中不推荐操作数据  因为别的组件可能也引用了这些数据
            #  把这些数据传递给父组件 让父组件处理这些数据
            this.$emit('change-num', {
              id: id,
              num: event.target.value
            });
          },
          del: function(id){
            // 把id传递给父组件
            this.$emit('cart-del', id);
          }
        }
      }
      var CartTotal = {
        props: ['list'],
        template: `
          <div class="total">
            <span>总价：{{total}}</span>
            <button>结算</button>
          </div>
        `,
        computed: {
          total: function() {
            // 计算商品的总价
            var t = 0;
            this.list.forEach(item => {
              t += item.price * item.num;
            });
            return t;
          }
        }
      }
      Vue.component('my-cart',{
        data: function() {
          return {
            uname: '张三',
            list: [{
              id: 1,
              name: 'TCL彩电',
              price: 1000,
              num: 1,
              img: 'img/a.jpg'
            }]
        },
        template: `[/mw_shl_code][mw_shl_code=applescript,true] <div class='cart'>          <cart-title :uname='uname'></cart-title>
                          # 4  父组件中接收子组件传递过来的数据 
            <cart-list :list='list' @change-num='changeNum($event)' @cart-del='delCart($event)'></cart-list>
            <cart-total :list='list'></cart-total>
          </div>
        `,
        components: {
          'cart-title': CartTitle,
          'cart-list': CartList,
          'cart-total': CartTotal
        },
        methods: {
          changeNum: function(val) {
            //4.1 根据子组件传递过来的数据，跟新list中对应的数据
            this.list.some(item=>{
              if(item.id == val.id) {
                item.num = val.num;
                // 终止遍历
                return true;
              }
            });
          },
          delCart: function(id) {
            // 根据id删除list中对应的数据
            // 1、找到id所对应数据的索引
            var index = this.list.findIndex(item=>{
              return item.id == id;
            });
            // 2、根据索引删除对应数据
            this.list.splice(index, 1);
          }
        }
      });
      var vm = new Vue({
        el: '#app',
        data: {
  
        }
      });
  
    </script>[/mw_shl_code]