Vue中ref $ref 的用法

在Vue中我们不需要获取dom节点，只要给元素绑定ref就可以获取（this.$refs.refName）

ref的使用

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

<p ref="xi">Hello</p>
<children ref="children"></children>

调用

this.$ref.xi. this.$ref.children

示例：

这是子组件

<template>
    <div>{{msg}}</div>
</template>
 
<script>
export default {
  data() {
    return {
      msg: '子组件'
    }
  },
  methods: {
    change() {
      this.msg = '码农的美好一天'
    }
  }
}
</script>
 

这是父组件

<template>
  <div @click="childrenClick">
    <children ref="children"></children>
  </div>
</template>
 
<script>
//引入子组件
import children from 'components/children.vue'
export default {
data() {
   
  },
  methods: {
    childrenClick() {
      this.$refs.children  //返回一个对象
      this.$refs.children.change() // 调用children的change方法
    }
  },
components: { 
    children 
  },
}
</script>
 

这就是ref的简单使用，ref减少获取dom节点的消耗。