vue组件

作者: 婲魢銣佌亾荷姒堪 | 来源:发表于2018-09-20 14:34 被阅读0次

组件

组件（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>

vue组件

组件

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

全局组件代码：

局部组件代码：

例子：

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

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

子传父：用事件名 $emit

同级之间传值：第三方量

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

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

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

vue组件

组件

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

全局组件代码：

局部组件代码：

例子：

组件之间的传值：

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

子传父：用事件名 $emit

同级之间传值：第三方量

全局组件代码：

全局组件代码：

全局组件代码：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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

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

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

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