Explanation and usage of ref attribute in vue3

Combining API-ref attributes

In vue2.x, you can add attributes to the element , and then get the corresponding element ref='xxx'in the code bythis.$refs.xxx

However, there is no such thing in vue3China , so it is not possible to obtain elements through attributes in China .$refsvue3refvue2

Goal: Master the use of ref attributes to bind DOM or components

You can use the ref attribute to obtain DOM or component instances, and the writing method needs to be distinguished from vue2.0

• Manipulate ref--array scene based on Vue2

<ul>
  <li v-for="(item, index) in list" ref="fruits" :key="index">{
   
   { item }}</li>
  <!-- <my-com :key='index' v-for='index in 8' ref='info'></my-com> -->
</ul>
<button @click="handleClick">点击</button>

methods: {
    
    
  handleClick () {
    
    
    const fruits = this.$refs.fruits
    console.log(fruits[1].innerHTML)
  }
}
// 批量绑定同名的ref （主要就是v-for场景中使用 ref）,此时通过[this.$refs.名称]访问的值应该是一个数组，数组中包含每一个DOM元素
// ref绑定组件的用法与之类似

Summarize:

1. In Vue2, a single DOM and component can be directly manipulated by refthis.$refs.info.innerHTML
2. In Vue2, DOM and components can be operated in batches through refthis.$refs.fruit[0].innerHTML

• ref operates on a single DOM element - the rules of Vue3

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li ref='fruit' v-for='item in fruits' :key='item.id'>{
   
   {item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
      id: 1,
      name: 'apple'
    }, {
      id: 2,
      name: 'orange'
    }])

    const handleClick = () => {
      // 4、此时可以通过info变量操作DOM
      console.log(info.value.innerHTML)
    }

    // 2、把变量返回给模板使用
    return { fruits, info, handleClick }
  }
}
</script>

<style lang="less">
</style>

Summary: the process of operating a single DOM or component

1. Define a reactive variable
2. Return the variable to the template for use
3. Bind the data returned above in the template
4. DOM or component instances can be manipulated through the info variable

• Get the DOM or components traversed by v-for

<template>
  <div>
    <div>ref操作DOM和组件</div>
    <hr>
    <!-- 3、模板中绑定上述返回的数据 -->
    <div ref='info'>hello</div>
    <!-- <my-com ref='info'>hello</my-com> -->
    <ul>
      <li :ref='setFruits' v-for='item in fruits' :key='item.id'>{
    
    {
    
    item.name}}</li>
    </ul>
    <button @click='handleClick'>点击</button>
  </div>
</template>

<script>
import {
    
     ref } from 'vue'

export default {
    
    
  name: 'App',
  setup () {
    
    
    // this.$refs.info.innerHTML
    // this.$refs.fruit 的值应该是一个数组，数组中放的DOM元素
    // this.$refs.fruit[0].innerHTML ---> apple
    // -----------------------------------------
    // Vue3中通过ref操作DOM
    // 1、定义一个响应式变量
    const info = ref(null)

    const fruits = ref([{
    
    
      id: 1,
      name: 'apple'
    }, {
    
    
      id: 2,
      name: 'orange'
    }, {
    
    
      id: 3,
      name: 'pineapple'
    }])

    // 定义操作DOM的函数
    const arr = []
    const setFruits = (el) => {
    
    
      // 参数el表示单个DOM元素
      arr.push(el)
    }

    const handleClick = () => {
    
    
      // 4、此时可以通过info变量操作DOM
      // console.log(info.value.innerHTML)
      console.log(arr)
    }

    // 2、把变量返回给模板使用
    return {
    
     fruits, info, handleClick, setFruits }
  }
}
</script>

<style lang="less">
</style>

Summary: The flow of ref batch operation elements

1. define a function
2. Bind the function to ref ( must be dynamically bound )
3. In the function, a single element can be obtained through parameters, and this element can generally be placed in an array
4. Batch elements can be manipulated through the above array