Vue-组件使用的细节点

1.用is标签解决组件使用当中可能出现的小bug

模板标签使用时（table、ul）出现的bug：
页面使用子组件模板来渲染table里的tr、td标签时， 会被作为无效的内容提升到外部，并导致最终渲染结果出错，tr显示会跟table同级，这不符合html规范——html只支持在table里写tr，ul里写lo，select里写option。

这是无效的写法：
<table>
  <blog-post-row></blog-post-row>
</table>

这是正确的写法：
<table>
  <tr is="blog-post-row"></tr>
</table>

所以不能在以上标签里直接引用自定义的模板标签，而要用is来指定真正的模板标签，这样既能保证页面显示的是tr，又能符合h5的编码规范。

2.在子组件里定义data时，必须是一个函数，而不能是一个对象

因为子组件有可能调用多次，这样就能让每一个子组件拥有一个独立的数据存储

data(){
	return {
		content:'this is row'
    }
}

如果 Vue 没有这条规则，点击一个按钮可能就影响到其它所有实例

3.在div标签里使用ref时，获取的是标签对应的dom元素，在组件使用时，获取的是子组件的引用

例如计算两个子组件的数量和，只要通过refs获取到子组件，就可以拿到它对应的数据，进而计算求和：

    <div id="root">
        <counter @change="handleChange" ref="one"></counter>
        <counter @change="handleChange" ref="two"></counter>
        <div>{{total}}</div>
    </div>
<script>
        Vue.component('counter',{
            template:'<div @click="handleClick">{{count}}</div>',
            data(){
                return {
                    count:0
                }
            },
            methods: {
                handleClick(){
                    this.count++
                    this.$emit('change')
                }
            },
        })
        var vm = new Vue({
            el:"#root",
            data:{
                total:0
            },
            methods: {
                handleChange(){
                    // console.log(this.$refs.one.count)
                    // console.log(this.$refs.two.count)
                    this.total = this.$refs.one.count + this.$refs.two.count
                }
            },
        })
    </script>