Vue $refs 操作 DOM 元素

$refs

每个Vue组件实例上都包含一个$refs对象，对象中存储着对应的DOM元素或组件的引用。

默认情况下，$refs指向一个空对象。

ref

在元素中添加ref属性，并指定属性值，就会向$refs中注册（添加）这个元素。

ref可以添加在普通标签元素，也可以添加在组件上。

<template>
  <div>
    <p ref="myP">文字</p>
    <MyComponent ref="myComponent"></MyComponent>

    <button @click="showThis">按钮</button>
  </div>
</template>

操作元素

通过this.$refs.refName操作元素。

export default {
  methods: {
    showThis() {
      console.log(this)
      console.log(this.$refs.myP)
      console.log(this.$refs.myP.textContent)
      this.$refs.myP.style.color = 'red';
      this.$refs.myComponent.changeValue();
    }
  }
}