前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、ref和table的特性is的用法

ref可以引用dom，由于table的特性，is用法用来代指组件
示例：在这里插入图片描述

二、使用步骤

1.引入库

代码如下（示例）：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="app"><div><table><tbody><!--由于table的特性，is用法指实际用是row这个组件而不是tr--><tr is="row"></tr><tr is="row"></tr><tr is="row"></tr></tbody></table><!--<table><ul><li is="row"></li><li is="row"></li><li is="row"></li></ul></table>--><!--<table><select><option is="row"></option></select></table>--></div></div><div id="root"><div ref="hello" 
				@click="handleClick">
				hello world</div></div><!--当在div使用ref命名时，$refs.命名获取到的是dom节点，当在组件例如counter使用时，则是获取到子组件的引用--><div id="foot"><counter ref="one"
				@change="handleChange"></counter><!--父组件监听change事件handleChange--><counter ref="two"
				@change="handleChange"></counter><div>{{total}}</div></div><script type="text/javascript" src="js/vue.js"></script><script>
			
			Vue.component('row',{
				data:function(){//子组件定义data时，data必须是一个函数不能是对象return{
						content:"this is row"}},
				template:'<tr><td>{{content}}</td></tr>'//模板})
			var vm= newVue({
				el:"#app",})
			
			var cm= newVue({
				el:"#root",
				methods:{
					handleClick:function(){alert(this.$refs.hello.innerHTML)//指的是整个vue实例里面所有的引用里面一个叫做hello的dom节点}}})
			
			Vue.component('counter',{//创建子组件，计数器，data必须用函数
				template:"<div @click='handleClick'>{{number}}</div>",
				data:function(){return{
						number:0}},
				methods:{
					handleClick:function(){
						this.number++
						this.$emit('change')//子组件监听触发change事件}}})
			var dm= newVue({
				el:"#foot",
				data:{
					total:0},
				methods:{
					handleChange:function(){
						this.total= this.$refs.one.number+ this.$refs.two.number}}})</script></body></html>

总结

提示：这里对文章进行总结：
1.当在div使用ref命名时， $r e f s . 命名获取到的是 d o m 节点，当在组件例如 c o u n t e r 使用时，则是获取到子组件的引用，$ refs使用获取dom的元素
2.table的特殊属性，由于必须加tbody，若直接用组件则是不被包裹在tbody内与tr为平行，所以用is来代指组件
3.计算器的效果，通过父子组件的传值实现，$emit方法
4.子组件定义data时，data必须是一个函数不能是对象