使用组件的几个点

1. 子组件是table时，h5中，tbody应放tr,而现在放row,浏览器解析子组件会;用is属性

// An highlighted block
  <div id="app">
    <table>
      <tbody>
        <row></row>
        <row></row>
        <row></row> 
      </tbody>
    </table>
  </div>
    <script>
    Vue.component('row',{
      template:'<tr><td>this is a row</td></tr>'
    })
    var vm = new Vue({
      el: '#app'
    })
  </script>

  <div id="app">
    <table>
      <tbody>
        <tr is="row"></tr>
        <tr is="row"></tr>
        <tr is="row"></tr> 
      </tbody>
    </table>
  </div>
  
   <select>
      <option is="row"></tr>
   </select>
   
   <ul>
      <li is="row"></li>
   </ul>

2. 子组件中的data必须是一个function,而不能是一个obj;子组件可能被调用多次，保障每个子组件都有自己独立的存储
3. 处理复杂的动画，vue需要操作dom,this.$refs.xx（所有引用中）

// 父组件显示子组件count和
  <div id="app">
    <count @change="chg" ref="one"></count>
    <count @change="chg" ref="two"></count>
    <div>{{total}} </div>
  </div>
  <script>
    Vue.component('count',{
      template:'<div @click="handleClick">{{num}} </div> ',
      data() {
        return{
          num: 0
        }
      },
      methods: {
        handleClick(){
          this.num++
          this.$emit('change',this.num)
        }
      }
    })
    var vm = new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        chg(val){
          this.total = this.$refs.one.num+this.$refs.two.num
        }
      }
    })
  </script>