vue：ref的作用和实例

定义：用来获取元素或子组件注册或者引用信息，父组件通过$ref获取到相应的DOM对象和子组件

1、vue中ref的作用

• 获取页面的DOM元素
• 获取子组件的对象（也是一种通信方式）

2、实例

   1、获取DOM，首先创建一个父页面index然后写一个标签h1获取这个标签的DOM元素

h1的样式：

 运行：控制台打印出H1标签的dom元素，

例如：dom元素中的文本、网页中的位置和样式等

我们获取它的样式给view标签使用，那么$refs.路径，这里样式的路径是p.id所以引入的模版就是这样

运行效果：

刚刚黑色的文字也变成了紫色

3、获取子组件对象

  首先我们需要引入子组件samsung并在子组件中写一些数据和方法以便后面父元素好调用

  1、引入子组件samsung并获取samsung组件的对象

samsung页面：

运行：

打开控制台我们就能获取到samsung组件中的数据和方法和很多数据

然后我们获取并使用子页面的数据和方法：

运行并打印结果：

点击使用方法：

从而完成父子之间的组件通信。

总结：

ref的作用主要是：获取页面的DOM元素（样式、位置、文本等）、获取子组件的对象（也是一种通信方式）

源码：

（使用uniapp运行）：父页面

子页面：