ref及refs简记

vue中ref的一些常见作用

基本用法，本页面获取dom元素

<template> 
      <div id="app"> 
      <div ref="testDom">11111</div>
      <button @click="getTest">获取test节点</button> 
      </div>
 </template>
<script> 
export default { 
   methods: { 
   getTest() { console.log(this.$refs.testDom) } 
   } 
}; 
</script>

 

ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法；

获取子组件中的data

子组件

<template> <div> {{ msg }} </div> </template>

<script> export default { data() { return { msg: "hello world" } } } </script>

父组件

<template> <div id="app"> <HelloWorld ref="hello"/> <button @click="getHello">获取helloworld组件中的值</button> </div> </template>

<script> import HelloWorld from "./components/HelloWorld.vue";

export default { components: { HelloWorld }, data() { return {} }, methods: { getHello() { console.log(this.$refs.hello.msg) } } }; </script>

vue中的ref和$refs

#vm.$refs

·类型：Object

·只读

·详细：一个对象，持有已注册过ref的所有子组件

 

#ref

·预期：string

 

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例；

当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个包含了对应数据源的这些子组件的数组

 

整个用下来就是比较方便取DOM，方便操作DOM

 

ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。

　　如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件；

vue.js中文社区文档上的说明已经就比较通俗易懂了，其实我们可以这么理解，ref和$refs其实就是用来获取/操作DOM元素的；类似于jquey中的$(".xxx")；

那么我们如何使用ref和$refs呢？

　　ref可以直接加在HTML标签上，作为一个属性存在于HTML标签中

<input title="手机号"  name="mobile" ref="mobile" placeholder="手机号" type="tel" is-type="china-mobile" required :min="11" :max="11"></input>

　这样，我们就是给input输入框元素注册了引用信息，那么我们如何获取这个DOM元素呢？

　同样，vue.js也给我们提供了特定的方法:

this.$refs.mobile

也可理解为vue.js提供的获取DOM元素的方法