一 概述

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

二 什么是ref引用

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

三 ref引用示例

3.1 打印this内容

模板内容

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="showThis">打印this</button>
    <hr>
    <div class="box">
    </div>
  </div>
</template>

代码逻辑

export default {
  methods:{
    showThis(){
      console.log(this)
    }
  },
}

打印内容this.refs

3.2 带DOM元素的内容打印

模板内容(给h1添加ref)

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

打印内容this.refs

3.3 通过ref改变DOM内容

代码逻辑

methods:{
    showThis(){
      //console.log(this)
      this.$refs.myh1.style.color='red'
    }
  },

内容显示