17 通过ref代替DOM用来获取元素和组件的引用

本文主要是介绍17 通过ref代替DOM用来获取元素和组件的引用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

重点

ref :官网给出的解释是：

ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用，则引用将是该元素；如果在子组件上使用，则引用将是组件实例：

<!-- vm.$refs.p will be the DOM node -->
<p ref="p">hello</p><!-- vm.$refs.child will be the child component instance -->
<child-component ref="child"></child-component>

上面的说明有点凹口，简单使用就是：当我们在标签上使用的时候使用的是：ref=“my_name”; 然后我们在Vue的方法中引用的时候应该这样引用：this.$refs.my_name.xxx(这里的xxx代表我们可以调用my_name 元素的一些属性)

糖醋排骨

<!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>通过ref代替DOM用来获取元素和组件的引用</title><script src="./lib/vue-2.6.10.js"></script>
</head><body><div id="app"><input type="button" value="点击" ref="inputs" @click="clicksinput">23<h3 id="myh3" ref="h33">345 </h3></div><script>var vm = new Vue({el: '#app',data: {},methods: {clicksinput() {console.log("11")//通过DOM获取到的 元素的值：如：h3 console.log("原始的通过DOM获取到元素的值：" + document.getElementById('myh3').innerText)//在Vue 中通过 ref 引用获取到 元素的值：如 h3console.log("通过refs获取到的元素的值：" + this.$refs.h33.innerText)alert("原始的通过DOM获取到元素的值：" + document.getElementById('myh3').innerText + '------' + "通过refs获取到的元素的值：" + this.$refs.h33.innerText)//   alert(this.$refs.inputs.innerHtml)//  this.$refs.show()},show() {alert('通过ref调用方法')}}})</script></body></html>