1.  
  2. 主页
  3.  / 
  4. Vue教程
  5.  / 
  6. Vue教程之 ref 的使用

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>
标签
这篇文章对您有用吗?

我们要如何帮助您?

发表评论

您的电子邮箱地址不会被公开。