vue的ref引用

最新推荐文章于 2024-07-19 11:55:09 发布

LL读书人

最新推荐文章于 2024-07-19 11:55:09 发布

阅读量244

点赞数

分类专栏：前端文章标签： html vue 前端框架前端

本文链接：https://blog.csdn.net/jianggeye7485/article/details/119881019

版权

前端专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文详细介绍了Vue.js中的ref属性，用于获取DOM元素或组件引用。通过示例展示了如何使用ref改变元素样式，以及如何在组件间通信。还通过一个实际案例解释了在异步操作中如何正确使用$nextTick来避免未渲染完成的问题。

摘要由CSDN通过智能技术生成

一、什么是ref引用

ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用。
在这里插入图片描述

二、ref基本使用（ref方法是异步执行的）

给标签ref取名：

<h1 ref="myh1">app组件</h1>

  methods: {
    getRefs() {
      console.log(this.$refs)
    }
  }

在这里插入图片描述
使用ref改变h1标签颜色

  methods: {
    getRefs() {
      this.$refs.myh1.style.color = 'red'
    }
  }

在这里插入图片描述

三、实例

例子1：
在app组件中使用ref拿到counter组件中reset方法重置count值。
Counter.vue组件

<template>
  <div>
    <h1>Count = {{count}}</h1>
    <hr>
    <button @click="count++">count++</button>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0
    }
  },
  methods: {
    reset() {
      this.count = 0
    }
  }
}
</script>

app.vue组件

<template>
  <div>
    <h1 ref="myh1">app组件</h1>
    <hr>
    <button @click="getRefs">获取$refs引用</button>
    <counter ref="counterRef"></counter>
  </div>
</template>

<script>
import Counter from "./components/Counter.vue";
export default {
  name: 'App',
  components: {
    Counter
  },
  methods: {
    getRefs() {
      this.$refs.counterRef.reset()
    }
  },
}
</script>

在这里插入图片描述
例子2：
通过布尔值inputVisible来控制组件中的文本框与按钮的按需切换。
注：由于ref执行时异步的，会出现页面没渲染出来就执行ref方法出现undefined错误，所以使用$nextTick(cd)方法，来延迟执行。

<template>
  <div>
    <h1 ref="myh1">app组件</h1>
    <hr>
    <input type="text" v-if="inputVisible" ref="ipt">
    <button v-else @click="showInput">展示input输入框</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      inputVisible: false
    }
  },
  methods: {
    showInput() {
      this.inputVisible = true
      //获取文本框引用对象，调用聚焦focus方法
      this.$nextTick(() => {
        this.$refs.ipt.focus()
      })
    }
  }
}
</script>