[Vue]ref attribute

---

Preface

Catalog of series of articles:
[Vue] Catalog
Teacher’s courseware notes, excluding videos https://www.aliyundrive.com/s/B8sDe5u56BU

Online version of notes: https://note.youdao.com/s/5vP46EPC

Video: Shang Silicon Valley Vue2.0+Vue3.0 full set of tutorials丨vuejs from entry to proficiency

---

---

1. ref attribute

The ref attribute is used to register reference information (a substitute for id) for elements or subcomponents, which is equivalent to identifying page elements or subcomponents.Use the ref attribute to identify page elements or subcomponentsafter,The identified element or subcomponentIt will be collected and mounted by the component instance object where it is located.$refOn the properties of the component instance object。

1.1 How to use the ref attribute

1.1.1 Identify elements or subcomponents

Mark html tag element:

<h1 ref="xxx">.....</h1>

Mark subcomponents:

<School ref="xxx"></School>

1.1.2 Get the identified element or subcomponent

this.$refs.xxx

Among them, this is the component instance object where the marked element or sub-component is located.

1.2 Use the ref attribute to mark html tag elements

The ref attribute is applied to html tag elements,What is obtained is the corresponding real DOM element

<template>
  <div>
    <h1 ref="hello">Hello World</h1>
    <button @click="showH1">showH1</button>
  </div>
</template>

<script>
export default {
      
      
  name: 'App'
  methods: {
      
      
    showH1() {
      
      
      console.log(this.$refs.hello)
      console.log(this.$refs)
    }
  }
}
</script>

<style>

</style>

1.3 Use the ref attribute to mark subcomponents

The ref attribute is applied to component tags,What is obtained is the corresponding component instance object

MySchool component:

<template>
  <div class="demo">
    <h2>学校：{
   
   {name}}</h2>
    <h2>地址：{
   
   {address}}</h2>
  </div>
</template>

<script>
export default {
      
      
  name: 'MySchool',
  data() {
      
      
    return {
      
      
      name: 'SGG',
      address: 'Beijing'
    }
  },
}
</script>

<style>
  .demo {
      
      
    background-color: chocolate;
  }
</style>

App components:

<template>
  <div>
    <h1 ref="hello">Hello World</h1>
    <MySchool ref="myschool"></MySchool>
    <button @click="showH1">showH1</button> <br><br>
    <button @click="showMySchool">showMySchool</button>
  </div>
</template>

<script>
// 导入子组件
import MySchool from './components/MySchool.vue'

export default {
      
      
  name: 'App',
  components: {
      
      
    MySchool,
  },
  methods: {
      
      
    showH1() {
      
      
      console.log(this.$refs.hello)
      console.log(this.$refs)
    },
    showMySchool() {
      
      
      console.log(this.$refs.myschool)
      console.log(this.$refs)
    }
  }
}
</script>

<style>

</style>

1.4 Use id to get elements or subcomponents

<template>
  <div>
    <h1 ref="hello" id="hh">Hello World</h1>
    <MySchool ref="myschool" id="school"></MySchool>
    <button @click="showH1_School">showH1_School</button>
  </div>
</template>

<script>
// 导入子组件
import MySchool from './components/MySchool.vue'

export default {
      
      
  name: 'App',
  components: {
      
      
    MySchool
  },
  methods: {
      
      
    showH1_School() {
      
      
      console.log(document.getElementById('hh'))
      console.log(document.getElementById('school'))
    }
  }
}
</script>

<style>
</style>

Compare using the ref attribute with using the id. When using the ref attribute, you do not need to operate the DOM element yourself. When you use the ref attribute to obtain a subcomponent, you will get the entire component instance object instead of the compiled and parsed template of the subcomponent, which is beneficial to the later processing of the subcomponent. Perform operations.