ref属性是什么？

可以辅助开发者获取DOM元素或者组件的引用

什么意思？

我们可以使用jQuery的$来获取DOM元素，或者在原生中使用querySelector等获取到DOM元素并对其做出相应的操作

在Vue中，我们可以使用ref属性来获取DOM元素甚至组件引用来做出相应的操作

所以在Vue项目中，我们不会去使用jQuery，这也是jQuery慢慢淡出人们视线的主要原因之一

目录

ref引用DOM元素

ref定义

 ref引用组件实例

Son.vue:

App.vue:

ref引用DOM元素

首先我们需要在想要操作的元素标签中添加ref属性：

比如我们通过点击之后触发如下操作：

this.$refs.xxxx.style.color = 'red'

为什么要这样写呢？

我们通过例子来具体解析一下：

我们看到得到的当前组件实例，里面有一个$refs里面有一个DOM元素，而这个DOM元素不是别人，正是我们给到ref属性的那个元素：

this.$refs.xxxx.style.backgroundColor = 'red'

 我们会用了，但是ref哪来的？

ref定义

每一个Vue实例上都会包含一个refs对象，里面则存储着对应的DOM元素或者组件的引用，默认情况下组件的$refs指向的是一个空对象，就像这样：

console.log(this)

 ref引用组件实例

相同的，我们给组件标签添加ref属性

父组件就可以直接调用子组件的方法：

this.$refs.sonRef.子组件方法

假如我们想点击父组件元素让子组件元素背景颜色改变：

Son.vue:

App.vue:

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！