1.使用is属性来解决组件在渲染时的小问题

使用场景：table,ul,ol,selec等 对直接子元素有要求的标签当中

Bug重现(页面显示正常，但是标签元素混乱)

 <div id="app"> <table> <tbody> <row></row> </tbody> </table> </div><script> Vue.component('row', { template:'<tr><td>你好</td></tr>' }) var vm = new Vue ({ el: '#app' })</script></html>

元素如图 组件中tr标签不在tbody中

 解决方法：使用is属性<div id="app"> <table> <tbody> <tr is='row'></tr> </tbody> </table></div>

2. ref

在Vue中通过ref 可以操作dom,在标签中使用ref,则获取该标签的dom,在组件中使用ref，则获取该组件

一个Demo(数字 同一个组件counte,总数为根组件data中的total)

<div id="app"> <counter @change="handleChange" ref="one"></counter> <counter @change="handleChange" ref="two"></counter> 总数：{{total}}</div><script> Vue.component('counter', { template: '<div @click="handleClick">数字：{{number}}</div>', data() { return { number: 0, } }, methods: { handleClick() { // 点击事件，让number自加一 this.number++ this.$emit('change') // 子像父传值 } } }) var vm = new Vue({ el: '#app', data: { total: 0 }, methods: { handleChange () { this.total = this.$refs.one.number + this.$refs.two.number // this.$refs 可以获得组件，自然可访问其data } } })</script>