前端筆記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]