【郑州校区】前端笔记Vue项目第3天 8

【郑州校区】前端笔记Vue项目第3天 8

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

将输入框中的默认数据动态渲染出来
输入框失去焦点的时候更改商品的数量
子组件中不推荐操作数据把这些数据传递给父组件让父组件处理这些数据
父组件中接收子组件传递过来的数据并处理

[AppleScript] 纯文本查看 复制代码

<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: `

[AppleScript] 纯文本查看 复制代码

<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>

帐号		自动登录	找回密码
密码			加入黑马

【郑州校区】前端笔记Vue项目 第3天 8

0 个回复

【郑州校区】前端笔记Vue项目第3天 8