v-model组件及插槽

自定义组件v-model

一个组件中的v-model默认会利用名为value的prop(属性）和名为input的事件，但是像单选框、复选框等类型的输入控件可能会将value特性用于不同的目的。这时候我们可以在定义组件的时候，通过设置model选项可以用来实现不同的处理方式。

<div id="app">       
    <stepper v-model:value="goods_count"></stepper>    
</div>

<script>    
   // 计步器    
   Vue.component('stepper',{        
       props: ['count'],        
       model:{            
           // 代表什么情况下 触发这个v-model的行为            
           event: 'count-changed',            
           prop: 'count'
        
       },        
       template:`            
            <div>                
                <button @click="sub">-</button>                
                <span>{{count}}</span>                
                <button @click="add">+</button>            
            </div>        
        `,        
        methods:{            
            sub:function(){                
                 this.$emit('count-changed', this.count-1)            
             },            
             add:function(){                
                 this.$emit('count-changed', this.count+1)            
                }       
             }
   })    
   new Vue({        
        el: "#app",        
        data: {            
        goods_count: 0
        
        }    
   })
</script>

其中的props定义的属性分别是给外面调用组件的时候使用的。model中定义的prop：'count’是告诉后面使用v-model的时候，要修改哪个属性。
event:'count-changed’是告诉v-model，后面触发哪个事件的时候要修改属性。

插槽

我们定义完一个组件后，可能在使用的时候还需要往这个组件中插入新的元素或文本，这时候就可以使用插槽来实现。

<div id="app">        
     <nva-link :url="url">            
           <!-- 个人中心 -->            
           {{name}}        
     </nva-link>  
 </div>

<script>   
     Vue.component('nva-link',{        
          props: ['url'],        
          template:`        
          <a v-bind:href="url">            
               <slot></slot>        
         </a>        
         `   
      })   
     new Vue({       
          el: "#app",        
          data:{            
              url: "https://image.baidu.com/",            
              name: "图片"
       
        }    
  })
</script>

插入多个插槽

直接定义名字，一个插槽一个名字

 <template v-slot:header>这是header</template>            
 <template v-slot:main>这是main</template>           
  <template v-slot:settt>这是settt</template>
// 使每个连接不在一行中,加上div就行        
template:`        
<a v-bind:href="url">            
     <div>                
          <slot name="header"></slot>            
     </div>            
     <div>                
           <slot name="main"></slot>            
     </div>              
     <div>                
           <slot name="settt"></slot>            
     </div>        
 </a>        
  `

插槽的作用域

 <div id="app">        
      <container>            
          <template v-slot:header="wet">                
               这是头部区域                
               {{wet.navs}}            
           </template>            
           <template v-slot:footer="met">                
                 这是底部区域                
                 {{met.addr}}            
            </template>        
        </container>    
  </div>

<script>   
     Vue.component('container',{       
          template:`            
                <div>               
                     <div>                    
                         <slot name="header" :navs="navs"></slot>                
                     </div>                
                     <div>                    
                          <slot name="footer" :addr="addr"></slot>                
                      </div>            
                      </div>       
              `,       
              data: function(){           
                  return {               
                       navs: ['新闻','hao123','地图'],               
                       addr: "happy"           
                       }       
                   }
   })    
   new Vue({        
        el: "#app"    
     })
</script>