vue组件

组件

组件（component）：是vue最强大的功能之一组件化开发
                                    组件可以拓展 HTML 元素，封装可重用代码
$\color{orange}{注意：}$
               $\color{orange}{在组件模板中不能有两个以上的兄弟元素}$
               $\color{orange}{在全局组件中，必须把组件放在new Vue上面，否则会报错}$

组件分为两种：全局组件、局部组件

全局组件代码：

例子：

<div id="app">
    <aa></aa>
</div>
<script>
    Vue.component('aa',{
        template:`
    <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
    `
    })
    new Vue({
        el:'#app'
    })
</script>

局部组件代码：

例子：

<div id="app">
    <aa></aa>
</div>
<script>
    new Vue({
        el:'#app',
        components:{
            'aa':{
        template:`
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        `
            }
        }
    })
</script>

例子：

$\color{#f84f84}{点击按钮弹出窗口}$

<div id="app">
    <aa></aa>
</div>
<script>
    Vue.component("aa",{
        template:`
            <div>
                <h1>{{msg}}</h1>
                <button @click='alt'>按钮</button>
            </div>
        `,
        data:function(){
            return{
                msg:'dcgf'
           }
       },
       methods:{
           alt:function(){
               alert(11111) 
           }
       }
   })
    new Vue({
        el:'#app'
    })

组件之间的传值 $\color{#f84f84}{（重点）}$ ：

父传子：用属性名 props:['属性']

子传父：用事件名 $emit

同级之间传值：第三方量

全局组件 $\color{#98a456}{父传子}$ 代码：

例子1：

<div id="app">
    <my-component></my-component>
</div>
<script>
    Vue.component("my-component",{
        template:`
            <div>
                <h2>我是my-component组件的标题</h2>
                <my-child v-bind:zxc='zxx'></my-child>
            </div>
        `,
        data:function(){
            return{
                zxx:'fsadgdrvgrf'
            }
        }
    })
    Vue.component("my-child",{
        props:['zxc'],
        template:`
            <div>
                <h3>我是my-child组件中的标题</h3>
                <p>{{zxc}}</p>
            </div>
        `
    })
    new Vue({
        el:'#app'
    })
</script>

例子1： $\color{#65df42}{水果列表}$

<div id="app">
    <my-father></my-father>
</div>
<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:['苹果','梨子','橘子'],
                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>

例子2： $\color{#65df42}{水果列表点击按钮添加删除}$

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

例子3： $\color{#65df42}{购物车}$

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
    <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:[
                   {pname:'apple',price:3,count:3,sub:9},
                   {pname:'pear',price:4,count:4,sub:16},
                   {pname:'orange',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.pname}}</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:50
          }
      },
      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>
</body>
</html>

全局组件 $\color{#98a456}{子传父}$ 代码：

例子1：

<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='sendFather'>给父组件</button>
         `,
        data:function(){
            return{
                msg:'张世远是共产主义接班人'
            }
        },
        methods:{
            sendFather:function(){
//                   this.$emit('自定义事件',参数) 
                this.$emit('send',this.msg)
            }
        }
    }) 
    new Vue({
        el:"#app"
    })
</script>

例子2：

<div id='app'>
   <father></father>
</div>
<script src='js/vue.js'></script>
<script>
    Vue.component('father',{
        template:`
          <div>
            <h1>{{mess}}</h1>  
            <son @send='rcvMsg'></son>
          </div>
         `,
        data:function(){
            return{
               mess:'' 
            }
            
        },
        methods:{
            rcvMsg:function(txt){
                this.mess=txt;
            }
        }
    })
    
     Vue.component('son',{
        template:`
            <button @click='sendToFather'>我是子组件，我要向父组件传值</button>
          `,
         data:function(){
             return{
                 msg:'子组件向父组件传值'
             }
         },
         methods:{
             sendToFather:function(){
                 this.$emit('send',this.msg )
             }
         }
    })
   new Vue({
       el:"#app",
       
   })
</script>

例子： $\color{#65df42}{谈话}$

<div id="app">
    <chat></chat>         
</div>
<script>
    Vue.component('chat',{
        template:`
            <div>
                <ul>
                    <li v-for='value in arr'>{{value}}</li>
                </ul>
                <user @send='rcvMsg' userName='jack'></user>
                <user @send='rcvMsg' userName='rose'></user>
            </div>
        `,
        data:function(){
            return{
                arr:[]
            }
        },
        methods:{
            rcvMsg:function(txt){
                this.arr.push(txt)
            }
        }
    })
    Vue.component('user',{
        props:['userName'],
        template:`
            <div>
                <ul>
                    <label>{{userName}}</label>
                    <input type="text" v-model='inputVal'>
                    <button @click='sendMsg'>发送</button>
                </ul>
            </div>
    `,
        data:function(){
            return{
                inputVal:''
            }
        },
        methods:{
            sendMsg:function(){
                this.$emit('send',this.userName+':'+this.inputVal)
            }
        }
    })
    new Vue({
        el:'#app'
    })
</script>

全局组件 $\color{#98a456}{非父子组件传值}$ 代码：

例子：

<div id="app">
    <child></child>
    <son></son>
</div>
<script>
    var bus=new Vue();
    Vue.component('child',{
        template:`
            <div>
                <h1>我是child组件</h1>
                <button @click='sendMsg'>发送数据给son</button>
            </div>
    `,
        data:function(){
            return{
            msg:'hello vue'
            }
        },
        methods:{
            sendMsg:function(){
                bus.$emit('send',this.msg)
            }
        }
    })
    Vue.component('son',{
        template:`
            <div>
                <h1>我是son组件</h1>
                <a href=''>{{mess}}</a>
            </div>
    `,
        data:function(){
            return{
                mess:''
            }
        },
        mounted:function(){
            bus.$on('send',msg=>{
                console.log(this);
                this.mess=msg
            })
        }
    })
    new Vue({
        el:'#app'
    })
</script>

最后编辑于：2018.09.23 19:06:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 204,445评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,889评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,047评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,760评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,745评论 5赞 367
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,638评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,011评论 3赞 398
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,669评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,923评论 1赞 299
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,655评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,740评论 1赞 330
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,406评论 4赞 320
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,995评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,961评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,197评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,023评论 2赞 350
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,483评论 2赞 342

vue组件

组件

组件分为两种：全局组件、局部组件

全局组件代码：

局部组件代码：

例子：

组件之间的传值：

父传子：用属性名 props:['属性']

子传父：用事件名 $emit

同级之间传值：第三方量

全局组件代码：

全局组件代码：

全局组件代码：

推荐阅读更多精彩内容

组件之间的传值 $\color{#f84f84}{（重点）}$ ：

全局组件 $\color{#98a456}{父传子}$ 代码：

全局组件 $\color{#98a456}{子传父}$ 代码：

全局组件 $\color{#98a456}{非父子组件传值}$ 代码：