组件使用中的细节点

1，is的使用

正常情况下的table标签，table标签里面有tbody，tbody里面有tr，tr里面有td

现在我们想要用模板来显示tr以及tr里面的内容

发现模板跑到了table标签外面，并且和table同级这一层

这是因为在h5的规范里面说明，table里面必须放tbody，tbody里面必须要放tr，

我们现在在tbody里面放的row，那么当浏览器解析页面的时候就会出问题

解决方法：is

这段代码的意思是，我tbody里面只能放tr，那么我就放tr ，但是我们加了一个is=“row” 说明，虽然这是一个tr但是实际上这是一个row组件

这样就可以了

那么对于有序列表ol>li  ，  无序列表 ul>li  和select>option请别直接使用组件，使用is来标注组件的名字

2，子组件中的data表示

我们用组件中的数据来表示模板

这样子乍一看没什么问题

实际上，这是不行的

控制台报错说，data必须是一个函数，而不是一个对象

这是因为我们在根组件里面使用data来定义数据是没有问题的，但是当我们在非根组件里面就不能直接使用对象来定义数据

我们只能通过data定义为一个函数，然后让函数返回一个对象

之所以这样设计是因为子组件不像根组件只调用一次，子组件可能在页面的多个位置都有调用，那么我们现在想要每一个子组件都有一个自己数据，不希望和其他的子组件产生冲突

3，Vue中的ref 引用

一般来说，vue不希望我们直接操作dom，而是通过数据得变化来操作dom，但是有时候在处理相对复杂的动画情况的时候，我们不可免的要去操作dom，那么，在Vue中怎么样才能操作dom呢

我们给要操作的dom元素div加一个ref属性，名字为hello，然后在methods方法中，输出dom元素，this.$refs指的的整个Vue实例里面全部的引用，this.$refs.hello 指的是实例中所有引用里面有一个名字为hello的引用

返回的就是hello对应的节点

我们现在是在一个div标签上添加一个ref，那么通过this.$refs获得的就是一个dom元素

如果我们在一个组件上添加一个ref，那么通过this.$refs获得的就是一个组件的引用

点击数字之后， 数字都会自己加1

点击数字，两个数字就会相加并显示到第三行