2018-09-20

vue组件的简单使用

1，组件之间的内容传递：
首先是:父元素向子元素传递内容，使用属性进行传值：
实例：

            <div id='app'>
           <my-content></my-content>

   </div>
   <script src='js/vue.js'></script>
 <script>
   Vue.component("my-content",{

   template:`
      <div>
     <h2>我是my-content组件的标题</h2>
     <my-child v-bind:message='msg'></my-child>

 </div>
`,
data:function(){
    return{
        msg:'dgddbghfghfnh'
        }
    }
     }) 

     Vue.component("my-child",{
     props:['message'],
  1   template:`
  <div>
   <h3>我是my-child组件中的标题</h3>
   <p>{{message}}</p>
  </div>
`
     })
     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='sendFather'>给父组件</button>
         `,
              data:function(){
            return{
                    msg:'我是共产主义接班人'
                }
            },
                methods:{
                sendFather:function(){
//                   this.$emit('自定义事件',参数) 
                    this.$emit('send',this.msg)
            }
        }
    })
    
    
    new Vue({
        el:"#app"
    })
</script>

再次非父子直接传值：

  <div id='app'>
         <child></child>
         <son></son>
     </div>
    <script src='js/vue.js'></script>
    <script>
   var bus=new Vue();
   Vue.component('child',{//A
       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',{//B
       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'
   })
   
  //       v-HTML
//       v-text
    //       v-cloak
    </script>

2，实例展示：

购物车展示：

  <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: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>
          <input type='text' v-model='fruit'> <button @click='add'>添加</button>
          <my-child v-bind:fruList='list'></my-child>
      </div>
   `,
    data:function(){
        return{
        list:['apple','pear','orange'],
        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>