要点：

之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作

vue中用ref

 并且可以在component上找到

这边this指向的就是app组件,

 

显示,其实ref就是id的代替者,只不过不需要再写dom元素操作了

 

其实就是你在哪个标签上加ref,就vue component 帮你收集哪个元素

比如这边在h1和btn上加了ref则在vue component的$ref中,收集了,title和btn元素

注意： 如果在一个组件上加上ref?会收集什么元素？

发现输出的就是那个App的子组件School组件的new component、

也就是说sc是School组件的实例对象

输出一波app的Vue Component

发现sch为School的实例对象

 

id与ref的差别

如果没有组件的话,确实id和ref没有区别

但是在组件上这两个就有区别了

验证：

把组件上ref换成id,用于dom操作输出

发现输出的是school组件中完整的结构

 

为什么：

因为是给School组件标签加的id,之后就会跑到School组件最外侧的根元素上,也就是School组件的div上

 

 所以才会发现div上多了个id

 

 对比组件的id和ref

获取id的话,得到的就是一个组件的完整dom

 

获取ref的话,得到的是组件的实例对象,当在组件间通信里，组件的实例对象非常重要

 

 

总结：