VUE组件（应用）

全局变量：

<div id="app">
            <comp></comp>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('comp',{
                template:`
                 <div>
                    <h1>{{msg}}</h1>
                    <button @click='alt'>点击查看歌名</button>
                 </div>
                `
                ,
                data:function(){
                    return{
                        msg:'在一瞬间有一百万个不可能。'
                    }
                },
                methods:{
                    alt:function(){
                        alert('一百万个不可能')
                    }
                }
            })
            new Vue({
                el:'#app',
            })
        </script>

局部变量：

<div id="app">
           <comp></comp>
       </div>
       <script src="js/vue.js"></script>
       <script>
           new Vue({
               el:"#app",
               components:{
                   'comp':{
                       template:`
                       <ul>
                            <li>一百万个不可能</li>
                            <li>给陌生的你听</li>
                            <li>维也纳的冬天</li>
                       </ul>
                       `
                   }
               }
           })
       </script>

使用组件添加或删除列表：

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('my-father',{
                template:`
                   <div>
                   <input type="text" v-model="txt"/>
                   <button @click="add">添加</button>
                   <my-list v-bind:fruit="arr"></my-list>
                   </div>
                `
                ,
                data:function(){
                    return{
                        arr:['苹果','香蕉','菠萝'],
                        txt:''
                    }
                },
                methods:{
                    add:function(){
                        this.arr.push(this.txt),
                        this.txt=''
                    }
                }
            })
            Vue.component('my-list',{
                props:['fruit'],
                template:`
                   <ul>
                      <li v-for="(value,index) in fruit">{{value}} <button  @click='delt(index)'>删除</button></li>
                   </ul>
                `
                ,
                methods:{
                    delt:function(ind){
                        this.fruit.splice(ind,1)
                    }
                }
            })
            
            new Vue({
                el:"#app",
            })
        </script>

使用组件完成购物车：

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('my-father',{
                template:`
                   <div class="container">
                       <table class="table table-bordered text-center">
                         <thead>
                           <tr>
                             <th class='text-center'>编号</th>
                             <th class='text-center'>名称</th>
                             <th class='text-center'>单价</th>
                             <th class='text-center'>数量</th>
                             <th class='text-center'>小计</th>
                           </tr>
                         </thead>
                         <my-child v-bind:list='frulist'></my-child>
                       </table>
                   </div>
                `
                ,
                data:function(){
                    return{
                        frulist:[
                            {name:'apple',price:3,count:3,sub:9},
                            {name:'pear',price:4,count:4,sub:16},
                            {name:'mean',price:5,count:5,sub:25}
                        ]
                    }
                }
            })
          Vue.component('my-child',{
                props:['list'],
                template:`
                  <tbody>
                     <tr v-for="(value,index)  in list">
                        <td>{{index+1}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.price}}</td>
                        <td>
                           <button @click="add(index)">+</button>
                           <span>{{value.count}}</span>
                           <button  @click="redu(index)">-</button>
                        </td>
                        <td>{{value.sub}}</td>
                     </tr>
                     <tr>
                       <td colspan=5>总价:{{sum}}</td>
                     </tr>
                  </tbody>
                `
                ,
                data:function(){
                    return{
                        sum:0
                    }
                },
                methods:{
                    add:function(ind){
                        this.list[ind].count++;
                        //计算小计
                        this.list[ind].sub=this.list[ind].count*this.list[ind].price;
                        this.countSum();
                    },
                    redu:function(ind){
                        if(this.list[ind].count>1){
                            this.list[ind].count--
                        }
                        this.list[ind].sub=this.list[ind].count*this.list[ind].price;
                        this.countSum();
                    },
                    countSum:function(){
                        for(var i=0,total=0;i<this.list.length;i++){
                            total+=this.list[i].sub;
                        }
                        this.sum=total;
                    }
                }
            })
            new Vue({
                el:'#app',
            })
        </script>

利用组件传值：

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('my-father',{
                template:`
                 <div>
                    <my-son v-bind:tit="title"></my-son>
                    <my-list v-bind:fruit="arr"></my-list>
                 </div>
                `
                ,
                data:function(){
                    return{
                        arr:['apple','banana','orange'],
                        title:'水果列表'
                    }
                }
            })
            //获取title
            Vue.component('my-son',{
                props:['tit'],
                template:`
                  <h2>{{tit}}</h2>
                `
            })
            Vue.component('my-list',{
                props:['fruit'],
                template:`
                    <ul>
                        <li v-for="value in fruit">{{value}}</li>
                    </ul>
                `
            })
            new Vue({
                el:"#app",
            })
        </script>

组件——子传父：

<div id="app">
            <my-father></my-father>
        </div>
        <script src="js/vue.js"></script>
        <script>
            Vue.component('my-father',{
                template:`
                   <div>
                       <h1>{{mess}}</h1>
                       <my-child  @send='revmsg'></my-child>
                   </div>
                `
                ,
                data:function(){
                    return{
                        mess:''
                    }
                },
                methods:{
                    revmsg:function(txt){
                        this.mess=txt
                    }
                }
            })
            
            Vue.component('my-child',{
                template:`
                    <button @click='sendfther'>点击查看</button>
                `
                ,
                data:function(){
                    return{
                        msg:'还有什么等待，还有什么悲哀！'
                    }
                },
                methods:{
                    sendfther:function(){
                        //this.$emit('自定义事件'，参数)
                        this.$emit('send',this.msg)
                    }
                }
            })
            new Vue({
                el:'#app',
            })
        </script>

组件是vue最强大的功能之一，组件化开发。

组件可以扩展HTML元素，封装可重用的代码。

组件可分为局部变量和全局变量。

父传子--用属性传； 子传父---用事件传 $emit('自定义事件'，参数)。