添加属性及传递事件

给组件添加属性

像原始的html元素都有自己的一些属性，而我们自己创建的组件，也可以通过prop来添加自己的属性，这样别人再使用你创建的组件的时候就可以传递不同的参数了。

<div id="app">        
      <!-- 绑定属性 -->        
      <book-list v-bind:books="books"></book-list>           
      </div>

<script>    
   Vue.component('book-list',{        
       // 给组件添加属性  data里的数据无法直接引用，所以需要添加属性用propertys        
       props:['books'],        
       // 反引号  tab上面的`        
       template:`        
       <table>            
          <tr>                
               <th>序号</th>                
               <th>标题</th>            
           </tr>            
           <tr v-for="(book,index) in books">                
           <td>{{index+1}}</td>                
           <td>{{book.title}}</td>            
           </tr>        
        </table>        
        `    
        })   
      new Vue({        
           el: "#app",        
           data:{           
             books:[                
                 {"title": "三世同堂", "id":1},                
                 {"title": "骆驼祥子", "id":2},                
                 {"title": "边城", "id":3},
            
            ]        
       }   
  })
</script>

单一根元素

如果自定义组件中，会出现很多html元素，那么根元素必须只能由一个，其余的元素必须包含再这个根元素中。比如：

 template:`        
    <div>            
       <table>                
           <tr>                    
              <th>序号</th>                    <th>标题</th>               
           </tr>               
           <tr v-for="(book,index) in books">                    
               <td>{{index+1}}</td>                    
               <td>{{book.title}}</td>                
           </tr>            
        </table>            
        //  不会报错，模板中必须只有一个根元素 ，一个标签下                
            <div>123</div>    
    </div>       
     // 写在外面会报错        
     // <div>123</div>        `

子组件事件和传递事件到父组件

子组件中添加事件与之前的方式一样，然后如果发生某个事件后想要通知父组件，那么就可以使用 this.$emit 函数来实现。

 <div id="app">    
      <!-- //显示可点击，但不会出现点击的效果 -->        
      <book-list v-for="book in books" v-bind:book="book" @check-changed="checks"></book-list>
        
      <div v-for="cbook in lbook">            
           {{cbook.title}}        
      </div>     
</div>  

<script>    
    Vue.component('book-list',{        
        props:['book'],        
        template:`        
        <div>            
            <span>{{book.title}}</span>            <input type="checkbox" @click="Oncheck">    
        </div>        
        `,        
        methods:{            
            Oncheck: function(){                
                this.$emit('check-changed', this.book)            
                }        
           }    
       })     
       new Vue({        
            el: "#app",        
            data:{            
                 books:[                
                      {"title": "三世同堂", "id":1},                
                      {"title": "骆驼祥子", "id":2},                
                      {"title": "边城", "id":3},            
                ],            
                lbook: []        
          },        
             methods:{            
                 checks:function(book){                
                    // 推值 显示在页面上                
                    // console.log(book)                
                    // indexOf >0 存在                
                    var index = this.lbook.indexOf(book)                
                    if(index >=0){                    
                        // todo  在处的位置删除该对象                    
                        // this.lbook.splice(index,1)                    
                        // 会删除最后一个                    
                            this.lbook.pop()                
                        }else{                    
                             this.lbook.push(book)               
                              }            
                       }       
               }
  
   })
</script>