vue深入理解组件

一，使用组件的细节点

1、在ul，tbody,ol等标签的添加子元素时，这个子元素只能为li,tr，如果想要使用子组件应该在tr或li标签中添加is=“XX”，不如浏览器可能出现解析上的错误

<div id="root">
		 <table>
			 <tbody>
				 <tr is="row"></tr>
				 <tr is="row"></tr>
				 <tr is="row"></tr>
			 </tbody>
		 </table>
	</div>

	<script>
		Vue.component('row',{
			template:'<tr><td>this is a row</td></tr>'
		})
		var vm=new Vue({
			el:"#root",
			 
			}
		)
	</script>

2， ref=“XX” 给元素添加ref值相当于给他添加了一个id，可以用于vue.js选取html元素为dom，

<div id="root">
	 <table>
		 <tbody ref="hello" @click="handleClick">
			 <tr is="row"></tr>
			 <tr is="row"></tr>
			 <tr is="row"></tr>
		 </tbody>
	 </table>
</div>

<script>
	Vue.component('row',{
		template:'<tr><td>this is a row</td></tr>'
	})
	var vm=new Vue({
		el:"#root",
		methods:{
			handleClick:function(){
				console.log(this.$refs.hello);
				
			}
		}
		}
	)
</script>

this.$refs.XX 就是在这个vue实例下（也就是root下）所有的ref中找到那个ref="XX"的
就相当于是$("XX")

3、使用组件的data来控制组件中的内容互不影响

<div id="root">
		 <counter></counter>
		 <counter></counter>
	</div>

	<script>
		Vue.component('counter',{
			template:'<div @click="handleClick">{{number}}</div>',
			data:function(){
				return {
					number:0
				}
			},
			methods:{
				handleClick:function(){
					this.number++;
				}
			}
		})
		var vm=new Vue({
			el:"#root",
			
			}
		)
	</script>

这样就可以实现点击两个div分别增加number并渲染出来，而不是点一个两个一起加。