组合API-ref属性

总结：

• 单个元素：先申明ref响应式数据，返回给模版使用，通过ref绑定数据

• 遍历的元素：先定义一个空数组，定一个函数获取元素，返回给模版使用，通过ref绑定这个函数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<br><br><template>   <div class="container">     <!-- vue2.0 获取单个元素 -->     <!-- 1. 通过ref属性绑定该元素 -->     <!-- 2. 通过this.$refs.box获取元素 -->     <!-- <div ref="box">我是box</div> -->     <!-- vue2.0 获取v-for遍历的多个元素 -->     <!-- 1. 通过ref属性绑定被遍历元素 -->     <!-- 2. 通过this.$refs.li 获取所有遍历元素  -->     <!-- <ul>       <li v-for="i in 4" :key="i" ref="li">{{i}}</li>     </ul> -->       <!-- 单个元素 -->     <div ref="dom">我是box</div>     <!-- 被遍历的元素 -->     <ul>       <li v-for="i in 4" :key="i" :ref="setDom">第{{i}}LI</li>     </ul>   </div> </template> <script> import { onMounted, ref } from 'vue' export default {   name: 'App',   setup () {     // 1. 获取单个元素     // 1.1 先定义一个空的响应式数据ref定义的     // 1.2 setup中返回该数据，你想获取那个dom元素，在该元素上使用ref属性绑定该数据即可。     const dom = ref(null)     onMounted(()=>{        console.log(dom.value)     })   } } </script> <style scoped lang="less"></style>

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

    // 2. 获取v-for遍历的元素
    // 2.1 定义一个空数组，接收所有的LI
    // 2.2 定义一个函数，往空数组push DOM
    const domList = []
    const setDom = (el) => {
      domList.push(el)
    }
    onMounted(()=>{
      console.log(domList)
    })
    return {dom, setDom}