组件使用的细节注意点

组件使用的细节注意点：

1、is
部分标签使用的时候，不能直接使用自定义的组件，而要使用is=属性.
虽然写的是tr，但是调用的是row标签。
类似的还有，列表的ul，ol标签
<table>
  <tbody>
    <tr is="row"></tr>
    <tr is="row"></tr>	    
  </tbody>	
</table>

Vue.component('row', {
    template: '<tr><td>this is a row</tr></td>'
})

2、vue中操作DOM（操作动画），通过ref获取dom元素或组件的引用。
<div id='root'>
	<div ref="hello" 
	@click="handlerClick">Hello World</div>
</div>

var vm = new Vue({
	el:'#root',
	methods: {
		handleClick() {
			console.log(this.$refs.hello.innerHTML)
		}
	}
})
//------------------------------
<div id='root'>
	<couter ref="counter1" @change='handleChange'></couter>
	<couter ref="counter2" @change='handleChange'></couter>
	<div>{{total}}</div>
</div>
<script>
	// 子组件
	Vue.component('couter', {
		template:'<div  @click="handlerClick">Hello World</div>',
		data: function() {
			return{
				number: 0
			}
		},
		methods: {
			handleClick: function() {
				this.number ++
				this.$emit('change')
			}
		}
	})
	// 父组件
	var vm = new Vue({
	el:'#root',
	data: {
		total: 0
	}
	methods: {
		handleChange() {
			this.total = this.$refs.counter1.number + 
			this.$refs.counter2.number 
		}
	}
	});
})
</script>

组件的参数校验：
Vue.component('child', {
	props: {
		// 字符串校验
		content: String,
		content: [String, Number]
		content: {
			type: String,
			// required: true,
			// defualt: 'abc'
			// 字符串长度校验，长度必须大于5
			validator: function(value) {
				return (value.length > 5)
			}
		}
	},
	template: '<div>{{content}}</div>'
})
非props属性，会显示在dom结构中。