组合API-ref属性

目标:掌握使用ref属性绑定DOM或组件

• 获取DOM或者组件实例可以使用ref属性,写法和vue2.0需要区分。
• 获取单个DOM或者组件
• 获取v-for遍历的多个DOM或者组件

<template>
    <div class="ref">
        <!--  vue2.x 获取div元素 -->
        <!--  1. ref绑定该元素 -->
        <!--  2.通过this.$refs.box 获取改dom元素 -->
        <!-- <div ref="box">我是box</div> -->

         <!--  vue2.x 获取 多个div元素 -->
        <!--  1. ref绑定该元素 -->
        <!--  2.通过this.$refs.li 获取所有li元素,然后通过索引去取 -->
        <!-- <ul>
            <li v-for="i in 4"  :key="i"  ref="li"></li>
        </ul> -->

        <!--vue3.0 获取单个元素  -->
       <div ref="box">dsdsd</div>
         
        <!--vue3.0 获取多个元素  -->
        <ul>
            <li v-for="i in 4"  :key="i"  :ref="setDom">{{ i}}</li>
        </ul>

    </div>
</template>

<script>
import { onMounted, ref } from 'vue'
export default { 
   name:'ref属性',
   setup(){

        //  1.获取单个元素
        //  1.1 先定义个空的响应式数据局ref定义
        //  1.2 setup返回该数据,你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可
        const box = ref(null);
        // console.log(dom)
        onMounted(()=>{
        console.log(box.value);
        })



         //  2.获取v-for遍历元素
        //  1.1 先定义个空的数组接收所有的li
        //  1.2 定义一个函数空数组中push Dom，这个函数会根据li元素的个数，就执行多少次
        const  domList = []

        const  setDom = (el)=>{
            console.log(el);
            domList.push(el);
         }
     
       return {
           box,
           setDom 
        }
   }  
    
}
</script>

总结

• 单个元素:先声明ref响应式数据,返回给模板使用，然后通过ref绑定数据
• 遍历的元素:先定义一个数组,定义一个函数获取元素,返回给模板使用，通过ref绑定这个函数。