VUE組件化開發(fā)

組件

  • 組件 (Component) 是 Vue.js 最強大的功能之一
  • 組件可以擴展 HTML 元素飞傀，封裝可重用的代

組件注冊

全局注冊

  • Vue.component('組件名稱', { }) 第1個參數(shù)是標簽名稱，第2個參數(shù)是一個選項對象
  • 全局組件注冊后湿弦，任何vue實例都可以用
組件基礎用
<div id="example">
  <!-- 2锁右、 組件使用 組件名稱 是以HTML標簽的形式使用  -->  
  <my-component></my-component>
</div>
<script>
    //   注冊組件 
    // 1汁咏、 my-component 就是組件中自定義的標簽名
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })

    // 創(chuàng)建根實例
    new Vue({
      el: '#example'
    })

</script>
組件注意事項
  • 組件參數(shù)的data值必須是函數(shù)同時這個函數(shù)要求返回一個對象
  • 組件模板必須是單個根元素
  • 組件模板的內容可以是模板字符串
  <div id="app">
     <!-- 
        4莲趣、  組件可以重復使用多次 
          因為data中返回的是一個對象所以每個組件中的數(shù)據是私有的
          即每個實例可以維護一份被返回對象的獨立的拷貝   
    --> 
    <button-counter></button-counter>
    <button-counter></button-counter>
    <button-counter></button-counter>
      <!-- 8、必須使用短橫線的方式使用組件 -->
     <hello-world></hello-world>
  </div>

<script type="text/javascript">
    //5  如果使用駝峰式命名組件澡屡，那么在使用組件的時候猿挚，只能在字符串模板中用駝峰的方式使用組件咐旧，
    // 7驶鹉、但是在普通的標簽模板中，必須使用短橫線的方式使用組件
     Vue.component('HelloWorld', {
      data: function(){
        return {
          msg: 'HelloWorld'
        }
      },
      template: '<div>{{msg}}</div>'
    });
    
    Vue.component('button-counter', {
      // 1铣墨、組件參數(shù)的data值必須是函數(shù) 
      // 同時這個函數(shù)要求返回一個對象  
      data: function(){
        return {
          count: 0
        }
      },
      //  2室埋、組件模板必須是單個根元素
      //  3、組件模板的內容可以是模板字符串  
      template: `
        <div>
          <button @click="handle">點擊了{{count}}次</button>
          <button>測試123</button>
            #  6 在字符串模板中可以使用駝峰的方式使用組件   
           <HelloWorld></HelloWorld>
        </div>
      `,
      methods: {
        handle: function(){
          this.count += 2;
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>

局部注冊

  • 只能在當前注冊它的vue實例中使用
  <div id="app">
      <my-component></my-component>
  </div>


<script>
    // 定義組件的模板
    var Child = {
      template: '<div>A custom component!</div>'
    }
    new Vue({
      //局部注冊組件  
      components: {
        // <my-component> 將只在父模板可用  一定要在實例上注冊了才能在html文件中使用
        'my-component': Child
      }
    })
 </script>

Vue 調試工具

Vue組件之間傳值

父組件向子組件傳值

  • 父組件發(fā)送的形式是以屬性的形式綁定值到子組件身上伊约。
  • 然后子組件用屬性props接收
  • 在props中使用駝峰形式姚淆，模板中需要使用短橫線的形式，字符串形式的模板中沒有這個限制
  <div id="app">
    <div>{{pmsg}}</div>
     <!--1屡律、menu-item  在 APP中嵌套著 故 menu-item   為  子組件      -->
     <!-- 給子組件傳入一個靜態(tài)的值 -->
    <menu-item title='來自父組件的值'></menu-item>
    <!-- 2腌逢、 需要動態(tài)的數(shù)據的時候 需要屬性綁定的形式設置 此時 ptitle  來自父組件data 中的數(shù)據 . 
          傳的值可以是數(shù)字、對象超埋、數(shù)組等等
    -->
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      // 3搏讶、 子組件用屬性props接收父組件傳遞過來的數(shù)據  
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子組件本身的數(shù)據'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內容',
        ptitle: '動態(tài)綁定屬性'
      }
    });
  </script>

子組件向父組件傳值

  • 子組件用$emit()觸發(fā)事件
  • $emit() 第一個參數(shù)為 自定義的事件名稱 第二個參數(shù)為需要傳遞的數(shù)據
  • 父組件用v-on 監(jiān)聽子組件的事件

 <div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
     <!-- 2 父組件用v-on 監(jiān)聽子組件的事件
        這里 enlarge-text  是從 $emit 中的第一個參數(shù)對應   handle 為對應的事件處理函數(shù) 
    --> 
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      子組件向父組件傳值-攜帶參數(shù)
    */
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ###  1、子組件用$emit()觸發(fā)事件
            ### 第一個參數(shù)為 自定義的事件名稱   第二個參數(shù)為需要傳遞的數(shù)據  
          <button @click='$emit("enlarge-text", 5)'>擴大父組件中字體大小</button>
          <button @click='$emit("enlarge-text", 10)'>擴大父組件中字體大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父組件中內容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          // 擴大字體大小
          this.fontSize += val;
        }
      }
    });
  </script>

兄弟之間的傳遞

  • 兄弟之間傳遞數(shù)據需要借助于事件中心霍殴，通過事件中心傳遞數(shù)據
    • 提供事件中心 var hub = new Vue()
  • 傳遞數(shù)據方媒惕，通過一個事件觸發(fā)hub.$emit(方法名，傳遞的數(shù)據)
  • 接收數(shù)據方来庭，通過mounted(){} 鉤子中 觸發(fā)hub.$on()方法名
  • 銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞數(shù)據
 <div id="app">
    <div>父組件</div>
    <div>
      <button @click='handle'>銷毀事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      兄弟組件之間數(shù)據傳遞
    */
    //1妒蔚、 提供事件中心
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2、傳遞數(shù)據方月弛，通過一個事件觸發(fā)hub.$emit(方法名肴盏，傳遞的數(shù)據)   觸發(fā)兄弟組件的事件
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       // 3、接收數(shù)據方帽衙，通過mounted(){} 鉤子中  觸發(fā)hub.$on(方法名
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>點擊</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          //2菜皂、傳遞數(shù)據方，通過一個事件觸發(fā)hub.$emit(方法名佛寿，傳遞的數(shù)據)   觸發(fā)兄弟組件的事件
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        // 3幌墓、接收數(shù)據方但壮，通過mounted(){} 鉤子中  觸發(fā)hub.$on()方法名
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          //4、銷毀事件 通過hub.$off()方法名銷毀之后無法進行傳遞數(shù)據  
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

組件插槽

  • 組件的最大特性就是復用性常侣，而用好插槽能大大提高組件的可復用能力

匿名插槽


  <div id="app">
    <!-- 這里的所有組件標簽中嵌套的內容會替換掉slot  如果不傳值 則使用 slot 中的默認值  -->  
    <alert-box>有bug發(fā)生</alert-box>
    <alert-box>有一個警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      組件插槽：父組件向子組件傳遞內容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
        # 當組件渲染的時候蜡饵，這個 <slot> 元素將會被替換為“組件標簽中嵌套的內容”。
        # 插槽內可以包含任何模板代碼胳施，包括 HTML
          <slot>默認內容</slot>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

具名插槽

  • 具有名字的插槽
  • 使用 <slot> 中的 "name" 屬性綁定元素

  <div id="app">
    <base-layout>
       <!-- 2溯祸、 通過slot屬性來指定, 這個slot的值必須和下面slot組件得name值對應上
                如果沒有匹配到 則放到匿名的插槽中   --> 
      <p slot='header'>標題信息</p>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
      <!-- 注意點：template臨時的包裹標簽最終不會渲染到頁面上     -->  
      <template slot='header'>
        <p>標題信息1</p>
        <p>標題信息2</p>
      </template>
      <p>主要內容1</p>
      <p>主要內容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
            ### 1、 使用 <slot> 中的 "name" 屬性綁定元素 指定當前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            ###  注意點： 
            ###  具名插槽的渲染順序舞肆，完全取決于模板焦辅，而不是取決于父組件中元素的順序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  </script>
</body>
</html>

作用域插槽

  • 父組件對子組件加工處理
  • 既可以復用子組件的slot，又可以使slot內容不一致
  <div id="app">
    <!-- 
        1椿胯、當我們希望li 的樣式由外部使用組件的地方定義筷登，因為可能有多種地方要使用該組件，
        但樣式希望不一樣 這個時候我們需要使用作用域插槽 
        
    -->  
    <fruit-list :list='list'>
       <!-- 2哩盲、 父組件中使用了<template>元素,而且包含scope="slotProps",
            slotProps在這里只是臨時變量   
        --->    
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">
            {{slotProps.info.name}}              
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      作用域插槽
    */
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
            ###  3前方、 在子組件模板中,<slot>元素上有一個類似props傳遞數(shù)據給組件的寫法msg="xxx",
            ###   插槽可以提供一個默認內容，如果如果父組件沒有為這個插槽提供了內容廉油，會顯示默認的內容惠险。
                    如果父組件為這個插槽提供了內容，則默認的內容會被替換掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>

購物車案例

1. 實現(xiàn)組件化布局

  • 把靜態(tài)頁面轉換成組件化模式
  • 把組件渲染到頁面上
 <div id="app">
    <div class="container">
      <!-- 2抒线、把組件渲染到頁面上 --> 
      <my-cart></my-cart>
    </div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    # 1班巩、 把靜態(tài)頁面轉換成組件化模式
    # 1.1  標題組件 
    var CartTitle = {
      template: `
        <div class="title">我的商品</div>
      `
    }
    # 1.2  商品列表組件 
    var CartList = {
      #  注意點 ：  組件模板必須是單個根元素  
      template: `
        <div>
          <div class="item">
            <img src="img/a.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/b.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/c.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/d.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
          <div class="item">
            <img src="img/e.jpg"/>
            <div class="name"></div>
            <div class="change">
              <a href="">－</a>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            <div class="del">×</div>
          </div>
        </div>
      `
    }
    # 1.3  商品結算組件 
    var CartTotal = {
      template: `
        <div class="total">
          <span>總價：123</span>
          <button>結算</button>
        </div>
      `
    }
    ## 1.4  定義一個全局組件 my-cart
    Vue.component('my-cart',{
      ##  1.6 引入子組件  
      template: `
        <div class='cart'>
          <cart-title></cart-title>
          <cart-list></cart-list>
          <cart-total></cart-total>
        </div>
      `,
      # 1.5  注冊子組件   
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });

  </script>

2、實現(xiàn) 標題和結算功能組件

  • 標題組件實現(xiàn)動態(tài)渲染
    • 從父組件把標題數(shù)據傳遞過來 即 父向子組件傳值
    • 把傳遞過來的數(shù)據渲染到頁面上
  • 結算功能組件
    • 從父組件把商品列表list 數(shù)據傳遞過來 即 父向子組件傳值
    • 把傳遞過來的數(shù)據計算最終價格渲染到頁面上
 <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數(shù)據
    var CartTitle = {
      props: ['uname'],
      template: `
        <div class="title">{{uname}}的商品</div>
      `
    }
    # 2.3  商品結算組件  子組件通過props形式接收父組件傳遞過來的list數(shù)據   
    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'
          }]
        }
      },
      #  2.1  父組件向子組件以屬性傳遞的形式 傳遞數(shù)據
      #   向 標題組件傳遞 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>

3. 實現(xiàn)列表組件刪除功能

  • 從父組件把商品列表list 數(shù)據傳遞過來 即 父向子組件傳值
  • 把傳遞過來的數(shù)據渲染到頁面上
  • 點擊刪除按鈕的時候刪除對應的數(shù)據
    • 給按鈕添加點擊事件把需要刪除的id傳遞過來
      • 子組件中不推薦操作父組件的數(shù)據有可能多個子組件使用父組件的數(shù)據 我們需要把數(shù)據傳遞給父組件讓父組件操作數(shù)據
      • 父組件刪除對應的數(shù)據
 <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>
      `
    }
    #  3.2 把列表數(shù)據動態(tài)渲染到頁面上  
    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>
              <input type="text" class="num" />
              <a href="">＋</a>
            </div>
            # 3.3  給按鈕添加點擊事件把需要刪除的id傳遞過來
            <div class="del" @click='del(item.id)'>×</div>
          </div>
        </div>
      `,
      methods: {
        del: function(id){
           # 3.4 子組件中不推薦操作父組件的數(shù)據有可能多個子組件使用父組件的數(shù)據 
          #       我們需要把數(shù)據傳遞給父組件 讓父組件操作數(shù)據 
          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'
          },{
            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'
          }]
        }
      },
      # 3.1 從父組件把商品列表list 數(shù)據傳遞過來 即 父向子組件傳值  
      template: `
        <div class='cart'>
          <cart-title :uname='uname'></cart-title>
          #  3.5  父組件通過事件綁定 接收子組件傳遞過來的數(shù)據 
          <cart-list :list='list' @cart-del='delCart($event)'></cart-list>
          <cart-total :list='list'></cart-total>
        </div>
      `,
      components: {
        'cart-title': CartTitle,
        'cart-list': CartList,
        'cart-total': CartTotal
      },
      methods: {
        # 3.6    根據id刪除list中對應的數(shù)據        
        delCart: function(id) {
          // 1嘶炭、找到id所對應數(shù)據的索引
          var index = this.list.findIndex(item=>{
            return item.id == id;
          });
          // 2抱慌、根據索引刪除對應數(shù)據
          this.list.splice(index, 1);
        }
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });

  </script>
</body>
</html>

4. 實現(xiàn)組件更新數(shù)據功能 上

  • 將輸入框中的默認數(shù)據動態(tài)渲染出來
  • 輸入框失去焦點的時候 更改商品的數(shù)量
  • 子組件中不推薦操作數(shù)據 把這些數(shù)據傳遞給父組件 讓父組件處理這些數(shù)據
  • 父組件中接收子組件傳遞過來的數(shù)據并處理
 <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. 將輸入框中的默認數(shù)據動態(tài)渲染出來
                # 2. 輸入框失去焦點的時候 更改商品的數(shù)量  需要將當前商品的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 子組件中不推薦操作數(shù)據  因為別的組件可能也引用了這些數(shù)據
          #  把這些數(shù)據傳遞給父組件 讓父組件處理這些數(shù)據
          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: `
        <div class='cart'>
          <cart-title :uname='uname'></cart-title>
            # 4  父組件中接收子組件傳遞過來的數(shù)據 
          <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 根據子組件傳遞過來的數(shù)據，跟新list中對應的數(shù)據
          this.list.some(item=>{
            if(item.id == val.id) {
              item.num = val.num;
              // 終止遍歷
              return true;
            }
          });
        },
        delCart: function(id) {
          // 根據id刪除list中對應的數(shù)據
          // 1旱物、找到id所對應數(shù)據的索引
          var index = this.list.findIndex(item=>{
            return item.id == id;
          });
          // 2遥缕、根據索引刪除對應數(shù)據
          this.list.splice(index, 1);
        }
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });

  </script>

5. 實現(xiàn)組件更新數(shù)據功能 下

  • 子組件通過一個標識符來標記對用的用戶點擊 + - 或者輸入框輸入的內容
  • 父組件拿到標識符更新對應的組件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .container {
    }
    .container .cart {
      width: 300px;
      margin: auto;
    }
    .container .title {
      background-color: lightblue;
      height: 40px;
      line-height: 40px;
      text-align: center;
      /*color: #fff;*/  
    }
    .container .total {
      background-color: #FFCE46;
      height: 50px;
      line-height: 50px;
      text-align: right;
    }
    .container .total button {
      margin: 0 10px;
      background-color: #DC4C40;
      height: 35px;
      width: 80px;
      border: 0;
    }
    .container .total span {
      color: red;
      font-weight: bold;
    }
    .container .item {
      height: 55px;
      line-height: 55px;
      position: relative;
      border-top: 1px solid #ADD8E6;
    }
    .container .item img {
      width: 45px;
      height: 45px;
      margin: 5px;
    }
    .container .item .name {
      position: absolute;
      width: 90px;
      top: 0;left: 55px;
      font-size: 16px;
    }

    .container .item .change {
      width: 100px;
      position: absolute;
      top: 0;
      right: 50px;
    }
    .container .item .change a {
      font-size: 20px;
      width: 30px;
      text-decoration:none;
      background-color: lightgray;
      vertical-align: middle;
    }
    .container .item .change .num {
      width: 40px;
      height: 25px;
    }
    .container .item .del {
      position: absolute;
      top: 0;
      right: 0px;
      width: 40px;
      text-align: center;
      font-size: 40px;
      cursor: pointer;
      color: red;
    }
    .container .item .del:hover {
      background-color: orange;
    }
  </style>
</head>
<body>
  <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">
              # 1.  + - 按鈕綁定事件 
              <a href="" @click.prevent='sub(item.id)'>－</a>
              <input type="text" class="num" :value='item.num' @blur='changeNum(item.id, $event)'/>
              <a href="" @click.prevent='add(item.id)'>＋</a>
            </div>
            <div class="del" @click='del(item.id)'>×</div>
          </div>
        </div>
      `,
      methods: {
        changeNum: function(id, event){
          this.$emit('change-num', {
            id: id,
            type: 'change',
            num: event.target.value
          });
        },
        sub: function(id){
          # 2 數(shù)量的增加和減少通過父組件來計算   每次都是加1 和 減1 不需要傳遞數(shù)量   父組件需要一個類型來判斷 是 加一 還是減1  以及是輸入框輸入的數(shù)據  我們通過type 標識符來標記 不同的操作   
          this.$emit('change-num', {
            id: id,
            type: 'sub'
          });
        },
        add: function(id){
         # 2 數(shù)量的增加和減少通過父組件來計算   每次都是加1 和 減1 不需要傳遞數(shù)量   父組件需要一個類型來判斷 是 加一 還是減1  以及是輸入框輸入的數(shù)據  我們通過type 標識符來標記 不同的操作
          this.$emit('change-num', {
            id: id,
            type: 'add'
          });
        },
        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'
          },{
            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'
          }]
        }
      },
      template: `
        <div class='cart'>
          <cart-title :uname='uname'></cart-title>  
        # 3 父組件通過事件監(jiān)聽   接收子組件的數(shù)據  
          <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 分為三種情況：輸入框變更、加號變更宵呛、減號變更
          if(val.type=='change') {
            // 根據子組件傳遞過來的數(shù)據单匣，跟新list中對應的數(shù)據
            this.list.some(item=>{
              if(item.id == val.id) {
                item.num = val.num;
                // 終止遍歷
                return true;
              }
            });
          }else if(val.type=='sub'){
            // 減一操作
            this.list.some(item=>{
              if(item.id == val.id) {
                item.num -= 1;
                // 終止遍歷
                return true;
              }
            });
          }else if(val.type=='add'){
            // 加一操作
            this.list.some(item=>{
              if(item.id == val.id) {
                item.num += 1;
                // 終止遍歷
                return true;
              }
            });
          }
        }
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {

      }
    });
  </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市宝穗，隨后出現(xiàn)的幾起案子户秤，更是在濱河造成了極大的恐慌，老刑警劉巖逮矛，帶你破解...
    沈念sama閱讀 212,884評論 6贊 492
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鸡号，死亡現(xiàn)場離奇詭異，居然都是意外死亡须鼎，警方通過查閱死者的電腦和手機鲸伴，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,755評論 3贊 385
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門府蔗，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人汞窗，你說我怎么就攤上這事姓赤。” “怎么了仲吏？”我有些...
    開封第一講書人閱讀 158,369評論 0贊 348
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵不铆，是天一觀的道長。 經常有香客問我裹唆，道長誓斥，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 56,799評論 1贊 285
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任许帐，我火速辦了婚禮劳坑，結果婚禮上，老公的妹妹穿的比我還像新娘舞吭。我一直安慰自己泡垃，他們只是感情好析珊，可當我...
    茶點故事閱讀 65,910評論 6贊 386
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布羡鸥。 她就那樣靜靜地躺著，像睡著了一般忠寻。 火紅的嫁衣襯著肌膚如雪惧浴。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 50,096評論 1贊 291
  • 城市分裂傳說
    那天奕剃，我揣著相機與錄音衷旅，去河邊找鬼。 笑死纵朋，一個胖子當著我的面吹牛柿顶，可吹牛的內容都是我干的。 我是一名探鬼主播操软，決...
    沈念sama閱讀 39,159評論 3贊 411
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼嘁锯，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了聂薪？” 一聲冷哼從身側響起家乘，我...
    開封第一講書人閱讀 37,917評論 0贊 268
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎藏澳，沒想到半個月后仁锯，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經...
    沈念sama閱讀 44,360評論 1贊 303
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡翔悠，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,673評論 2贊 327
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年业崖，在試婚紗的時候發(fā)現(xiàn)自己被綠了野芒。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,814評論 1贊 341
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡双炕，死狀恐怖复罐，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情雄家，我是刑警寧澤效诅，帶...
    沈念sama閱讀 34,509評論 4贊 334
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站趟济，受9級特大地震影響乱投，放射性物質發(fā)生泄漏。R本人自食惡果不足惜顷编，卻給世界環(huán)境...
    茶點故事閱讀 40,156評論 3贊 317
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一戚炫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧媳纬，春花似錦双肤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0贊 21
  • 一樁弒父案茅糜，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至素挽，卻和暖如春蔑赘，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背预明。 一陣腳步聲響...
    開封第一講書人閱讀 32,123評論 1贊 267
  • 情欲美人皮
    我被黑心中介騙來泰國打工缩赛， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人撰糠。 一個月前我還...
    沈念sama閱讀 46,641評論 2贊 362
  • 代替公主和親
    正文 我出身青樓酥馍，卻偏偏與公主長得像，于是被迫代替她去往敵國和親阅酪。 傳聞我的和親對象是個殘疾皇子旨袒，可洞房花燭夜當晚...
    茶點故事閱讀 43,728評論 2贊 351