前端笔记Vue项目day3(六）

 

2、实现 标题和结算功能组件

• 标题组件实现动态渲染

  • 从父组件把标题数据传递过来 即 父向子组件传值

  • 把传递过来的数据渲染到页面上  

• 结算功能组件

  • 从父组件把商品列表list 数据传递过来 即 父向子组件传值

  • 把传递过来的数据计算最终价格渲染到页面上  

  • [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">
         # 2.2  标题组件     子组件通过props形式接收父组件传递过来的uname数据
        var CartTitle = {
          props: ['uname'],
          template: `
            <div class="title">{{uname}}的商品</div>
          `
        }
            # 2.3  商品结算组件  子组件通过props形式接收父组件传递过来的list数据   
        var CartTotal = {
          props: ['list'],
          template: `
            <div class="total">
              <span>总价：{{total}}</span>
              <button>结算</button>
            </div>
          `,
          computed: {
            # 2.4    计算商品的总价  并渲染到页面上 
            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'
              },{
                id: 2,
                name: '机顶盒',
                price: 1000,
                num: 1,
                img: 'img/b.jpg'
              },{
                id: 3,
                name: '海尔冰箱',
                price: 1000,
                num: 1,
                img: 'img/c.jpg'
              },{
                id: 4,
                name: '小米手机',
                price: 1000,
                num: 1,
                img: 'img/d.jpg'
              },{
                id: 5,
                name: 'PPTV电视',
                price: 1000,
                num: 2,
                img: 'img/e.jpg'
              }]
            }
          },[/mw_shl_code][mw_shl_code=applescript,true]#  2.1  父组件向子组件以属性传递的形式 传递数据      #   向 标题组件传递 uname 属性   向 商品结算组件传递 list  属性  
          template: `
            <div class='cart'>
              <cart-title :uname='uname'></cart-title>
              <cart-list></cart-list>
              <cart-total :list='list'></cart-total>
            </div>
          `,
          components: {
            'cart-title': CartTitle,
            'cart-list': CartList,
            'cart-total': CartTotal
          }
        });
        var vm = new Vue({
          el: '#app',
          data: {
    
          }
        });
    
      </script>
    [/mw_shl_code]