位置: IT常识 - 正文
Vue(ref和$refs属性介绍与使用)
编辑：rootadmin推荐整理分享Vue(ref和$refs属性介绍与使用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现，本文我们就来详细的介绍下这个内容
除了自定义属性外，Vue实例还暴露一些有用的实例属性和方法，他们都有前缀$，以便和用户定义的属性和方法分开 常用的属性有：
常用的属性有：1：vm.$el //获取vue实例关联的Dom元素2: vm.$data //获取vue实例的data选项3：vm.$options//获取vue实例的自定义属性4：vm.$refs//获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。5: vm.$ref // ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例 ref加载普通元素上，this.$refs. 获取到的就是dom元素 ref记载在子组件上，this.$refs. 获取到的就是组件实例，可使用组件的所有方法。ref有三种用法： ①ref加在普通的元素上，用this.ref.name获取到的是dom元素； ②ref加在子组件上，用this.ref.name获取到的是组件实例，可以使用组件的所有方法； ③如何利用v-for和ref获取一组数据或者dom节点。 当v-for用于元素或者组件的时候，引用信息将是包含dom节点或组件实例的数组； 关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的，在初始渲染的时候，你不能访问它们--它们还不存在！$refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。refref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。
ref作用用来给元素或者子组件注册引用信息。引用信息将会注册给父组件的$refs对象上。 1、如果给普通的dom元素使用，引用指向的是dom元素。 2、如果是给子组件使用，引用指向的是子组件的实例。
注意： 1、$refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定。 2、微信小程序中给dom元素使用ref无效。得到的是 空对象.
$refs$refs 是一个对象，持有已注册过 ref 的所有的子组件。
具体演示
1.基础代码先来准备案例基础代码，如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script></head><body> <div id="app"> </div> <script> var vm = new Vue({ el: "#app", data: {}, methods: {} }) </script></body></html>2.普通DOM2.1 普通方式我们先通过 getElementById 方法来获取
2.2 ref使用接下来我们通过 ref 属性来试试。
然后查看 vm 实例对象
通过上面的演示我们发现 在vm实例上有一个 $refs属性，而且该属性就有我们通过ref注册的DOM对象，于是我们可以这样获取DOM对象
3.组件ref 也可以作用在组件中，我们来看下效果
3.1 添加组件先来添加一个自定义的组件
3.2 ref 使用在 子组件中使用 ref属性，会将子组件添加到父组件的$refs对象中，如下 查看vm对象
通过 vm 实例查看 发现 $refs中绑定的有 我们的login组件，而且还看到了对应的 组件中的 msg属性和 show方法，那这样我们可以调用了，如下
3.5 完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script></head><body> <div id="app"> <input type="button" value="获取h3的值" @click="getElement()"> <h3 id="myh3" ref="myh3" >我是一个h3</h3> <hr> <login ref='mylogin'></login> </div> <script> var login = { template: "<h3>我是login子组件</h3>", data(){ return { msg: "ok" } }, methods:{ show(){ console.log("show方法执行了...") } } } var vm = new Vue({ el: "#app", data: {}, methods: { getElement(){ // 通过 getElementById 方式获取 DOM 对象 // console.log(document.getElementById("myh3").innerHTML) // console.log(this.$refs.myh3.innerHTML) console.log(this.$refs.mylogin.msg) this.$refs.mylogin.show() } }, components:{ login } }) </script></body></html>二. vue中父子组件通过ref传值「dialog组件」一个基于vue的项目，有可能会很多的组件，组件之间难免需要进行数据的传递，比如: 父组件 传数据 给子组件；子组件传数据给父组件等，需要用到组件之间的通信处理方式。 项目中经常用到element中的dialog组件，现记录父子组件通过ref传值。
操作流程：
1.父组件中点击按钮吊起子组件模态框dialog进行内容设置，并给子组件传递idthis.$nextTick(() => { //此函数执行时所有的DOM挂载和渲染都已完成 this.$refs.dialogRef.init(this.fatherId); //获取子组件中init方法并将父组件id传递给子组件 });2.在子组件中需接收父组件传来的内容id并查询内容详情init (val) { this.activityId = val //接收父组件传递的id值}3.在子组件dialog中可以编辑内容，然后将数据通过$emit传递给父组件this.$emit("setActivityBtn", this.SetForm); //setActivityBtn为父组件接收的方法，将参数传给父组件4.父组件接收数据后提交到服务器setActivityBtn(data) { //获取子组件传来的值 let params = data },以下为父子组件全部代码
子组件Dialog
<script>export default { name: '', data () { return { id: '', //用来查询详情的id dialogFormVisible: false, //模态框 SetForm: { }, //模态框数据 } }, methods: { // 初始化方法 init (val) { this.activityId = val //接收父组件传递的值 this.dialogFormVisible = true; this.getActivityInfo() }, //获取内容详情 getActivityInfo () { }, //模态框确定按钮 setActivityBtn () { this.$emit("setActivityBtn", this.SetForm); //将参数传给父组件 this.dialogFormVisible = false; },}</script>父组件
<script>import Dialog from '../components/Dialog'export default { name: '', data () { return { fatherId:'', //详情id dialogShow: false, //模态框 } },components: { // 组件的引用 Dialog }, methods: { //吊起模态框 activitySet() { this.dialogShow= true; this.$nextTick(() => { //此函数执行时所有的DOM挂载和渲染都已完成 this.$refs.dialogRef.init(this.fatherId); //获取子组件中init方法并将父组件id传递给子组件 }); }, //确定按钮 setActivityBtn(data) { //获取子组件传来的值 let params = data XXXXXXXX(params).then(res => { if (res.data.code == 0) { this.dialogFormVisible = false } }) },}</script>吊起模态框
<script>import Dialog from '../components/Dialog'export default { name: '', data () { return { fatherId:'', //详情id dialogShow: false, //模态框 } },components: { // 组件的引用 Dialog }, methods: { //吊起模态框 activitySet() { this.dialogShow= true; this.$nextTick(() => { //此函数执行时所有的DOM挂载和渲染都已完成 this.$refs.dialogRef.init(this.fatherId); //获取子组件中init方法并将父组件id传递给子组件 }); }, //确定按钮 setActivityBtn(data) { //获取子组件传来的值 let params = data XXXXXXXX(params).then(res => { if (res.data.code == 0) { this.dialogFormVisible = false } }) },}</script>三.拓展方式一、父子组件通过ref传值,然后在子组件中data函数直接return获得父组件中：可以通过ref向子组件传值
this.$refs.dialogRef.name1=this.fatherName1this.$refs.dialogRef.name2=this.fatherName2子组件中：可以通过数组的形式向父组件传递多个参数
this.$emit("setActivityBtn", [this.SetForm,this.dialogFormVisible]);方式二.v-bind绑定，子组件中props接受，return中定义要改变传给父组件的属性：父组件
<script> this.fatherName= this.detailData.name; this.fatherSalePrice= this.detailData.salePrice;</script>子组件
<script> export default { props: { sonName: { type:String, default:'' }, sonSalePrice: { type:Number, default:0 }, }, data:function () { return { cartName:this.sonName, cartSalePrice:this.sonSalePrice } }, methods: { addCart() { this.$emit('confirmAddCart',[this.cartName,this.cartSalePrice]); } } }</script>注：vue的思想是数据驱动视图，所以尽量少的用直接操作dom，当然一些需要获取元素宽高等场景时也会用到$refs 事件驱动
四 vue的思想是数据驱动视图在前端来说数据驱动式框架，必然离不开事件驱动，事件驱动一定程度上弥补了数据驱动的不足，在dom操作的时代通常都是这样操作： 通过特定的选择器查找到需要操作的节点 -> 给节点添加相应的事件监听 响应用户操作，效果是这样： 用户执行某事件（点击，输入，后退等等） -> 调用 JavaScript 来修改节点 这种模式对业务来说是没有什么问题，但是从开发成本和效率来说会比较力不从心，在业务系统越来越庞大的时候，就显得复杂了。另一方面，找节点和修改节点这件事，效率本身就很低，因此出现了数据驱动模式。
数据驱动读取模板，同时获得数据，并建立 VM( view-model ) 的抽象层 -> 在页面进行填充 要注意的是，MVVM 对应了三个层，M - Model，可以简单的理解为数据层；V - View，可以理解为视图，或者网页界面；VM - ViewModel，一个抽象层，简单来说可以认为是 V 层中抽象出的数据对象，并且可以与V 和 M 双向互动（一般实现是基于双向绑定，双向绑定的处理方式在不同框架中不尽相同）。 用户执行某个操作 -> 反馈到 VM 处理（可以导致 Model 变动） -> VM 层改变，通过绑定关系直接更新页面对应位置的数据
Vue 模式Vue 通过{{}}绑定文本节点，data里动态数据与Props静态数据进行一个映射关系，当data中的属性或者props中的属性有变动，以上两者里的每个数据都是行为操作需要的数据或者模板 view 需要渲染的数据，一旦其中一个属性发生变化，则所有关联的行为操作和数据渲染的模板上的数据同一时间进行同步变化，这种基于数据驱动的模式更简便于大型应用开发。只要合理的组织数据和代码，就不会显得后续皮软。
何为动态数据 data，何为静态数据 props相同点两者选项里都可以存放各种类型的数据，当行为操作改变时，所有行为操作所用到和模板所渲染的数据同时都会发生同步变化。
不同点Data 被称之为动态数据的原因，在各自实例中，在任何情况下，我们都可以随意改变它的数据类型和数据结构，不会被任何环境所影响。
Props 被称之为静态数据的原因，在各自实例中，一旦在初始化被定义好类型时，基于 Vue 是单向数据流，在数据传递时始终不能改变它的数据类型。
更为关键地是，对数据单向流的理解，props的数据都是通过父组件或者更高层级的组件数据或者字面量的方式进行传递的，不允许直接操作改变各自实例中的props数据，而是需要通过别的手段，改变传递源中的数据。
data 选项当一个实例创建的时候，Vue会将其响应系统的数据放在data选项中，当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。初始定行的行为代码也都会随着响应系统进行一个映射。
而 data 选项中的数据在实例中可以任意改变，不受任何影响，前提必须数据要跟逻辑相辅相成。
初始化映射<template> <div> <p v-if='boolean'>true</p> <p v-for='value in obj'>{{value}}</p> <p v-for='item in list'>{{item}}</p> <p>{{StringMsg}}</p> <p>{{NumberMsg}}</p> </div></template><script> export default { data () { return { obj : {a:'1',b:'2',c:'3'}, list:['a','b','c'], boolean : true, StringMsg : 'hello vue', NumberMsg : 2.4, } } }</script>运行代码时，在data选项里定义了五种数据类型，通过指令和{{}}进行渲染，证实了data选项里可以定义任何数据类型。
视图与数据映射<template> <div> <p>{{StringMsg}}</p> <p>{{NumberMsg}}</p> <button @click='changeData'>改变数据</button> </div></template><script> export default { data () { return { StringMsg : 'hello vue', NumberMsg : 2.4 } }, methods: { changeData () { this.StringMsg = 2.4; this. NumberMsg = 'hello vue' } } }</script>每个.vue 的文件则就是一个实例，在 data 中定义了两种数据：
String 类型 Number 类型 同时还定义了一个 changeData 事件。
在运行代码时候，data选项已经进入了Vue的响应系统里，model层(数据层)与view层(视图层)进行了对应的映射，任何数据类型都可以定义。
当用户发生点击操作的时候，同时可以把 StringMsg， NumberMsg 的数据对调，充分说明了，无论值和类形都可以进行随意转换。
行为与数据的映射<template> <div> <p>{{StringMsg}}</p> <p>{{NumberMsg}}</p> <button @click='changeData'>改变数据</button> <button @click='findData'>查看数据</button> </div></template><script> export default { data () { return { StringMsg : 'hello vue', NumberMsg : 2.4 } }, methods: { changeData () { this.StringMsg = 2.4; this.NumberMsg = 'hello vue' }, findData () { console.log(`StringMsg: ${this.StringMsg}`) console.log(`NumberMsg: ${this.NumberMsg}`) } } }</script>改变数据以后，通过点击 findData 事件来进行验证，虽然在初始化定义好了行为数据的检测代码，但是当数据在执行 findData 之前先执行 changeData，一旦改变 data 选项里的数据时，findData 里对应的数据同时也会进行相应的映射。
this.StringMsg //=> 2.4this.NumberMsg //=>‘hello vue’五 、总结：data 选项里的数据是灵活的可以定义任何数据类型也可以改变成任何数据类型当数据变化时，视图和行为绑定的数据都会同步改变props使用props传递数据作用域是孤立的，它是父组件通过模板传递而来，想接收到父组件传来的数据，需要通过props选项来进行接收。子组件需要显示的下一篇：前端实战｜React18极客园——登陆模块（token持久化、路由拦截、mobx、封装axios）(前端实战面试题)
