Vue3中的组合API:ref的使用

一. 操作Dom

步骤:

1.先在setup中第一变量设置为null

2.return出来供模板使用

3.模板中绑定上述返回的数据

二:获取v-for遍历的DOM或者组件

步骤:

1,在组件或者需要遍历的dom上定义一个函数

2.把该函数绑定到ref上(必须是动态绑定)

3.在函数中可以通过参数得到单个元素,这个元素一般都可以放在数组中

4.使用

<template>
<h1>ref</h1>
<div ref="info">hello</div>
<li :ref="setFruits" v-for="item in fruits" :key="item.id">{{item.name}}</li>
<button @click="handlerClick">点击</button>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1.先定义ref为null
    const info = ref(null)
    const fruits = ref([{
      id: 1,
      name: 'apple'
    },
    {
      id: 2,
      name: 'pear'
    }
    ])
    const arr = []
    const setFruits = function (el) {
      arr.push(el)
    }
    const handlerClick = function () {
      console.log(info.value.innerHTML)
    }
    return { fruits, info, setFruits, handlerClick }
  }

}
</script>