Vue教程之 ref 的使用

本文咱们一下 vue 中的 ref 用法。

ref 是什么？

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

如果在普通的DOM元素上使用，那么则指向的就是普通的DOM元素。

普通DOM元素使用ref

<template>
  <div>
    <div ref="demo2" @click="handleClick">
      hello world
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick () {
      console.log(this.$refs.demo2.innerText)
    }
  }
}
</script>

组件上使用ref

demo3.vue

<template>
  <div>
    <Demo3 ref="d1" @change="handleChange"></Demo3>
    <Demo3 ref="d2" @change="handleChange"></Demo3>
    <h1>{{ total }}</h1>
  </div>
</template>

<script>
import Demo3 from './components/Demo3'
export default {
  data () {
    return {
      total: 0
    }
  },
  methods: {
    handleChange () {
      this.total = this.$refs.d1.number + this.$refs.d2.number
    }
  },
  components: {
    Demo3
  }
}
</script>

components/Demo3.vue

<template>
  <div>
    <h1 @click="handleClick">{{ number }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      number: 0
    }
  },
  methods: {
    handleClick () {
      this.number++
      this.$emit('change')
    }
  }
}
</script>