Vue2.0开发之——使用ref引用DOM元素(40)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 什么是ref引用
  • ref引用示例

二 什么是ref引用

  • ref用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用
  • 每个vue的组件实例上，都包含一个$refs对象，里面存储着对应的DOM元素或组件的应用
  • 默认情况下，组件的$refs指向一个空对象

三 ref引用示例

3.1 打印this内容

模板内容

1
2
3
4
5
6
7
8
9
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="showThis">打印this</button>
    <hr>
    <div class="box">
    </div>
  </div>
</template>

代码逻辑

1
2
3
4
5
6
7
export default {
  methods:{
    showThis(){
      console.log(this)
    }
  },
}

打印内容this.refs

3.2 带DOM元素的内容打印

模板内容(给h1添加ref)

1
<h1 ref="myh1">App 根组件</h1>

打印内容this.refs

3.3 通过ref改变DOM内容

代码逻辑

1
2
3
4
5
6
methods:{
    showThis(){
      //console.log(this)
      this.$refs.myh1.style.color='red'
    }
  },

内容显示