利用ref获取单个元素或者组件,ref

Header
shape

利用ref获取单个元素或者组件:

  1. 获取单个元素
  2. 先定义一个空的响应式数据ref定义的
  3. setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可。
<template>   <div id="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>     <!-- 被遍历元素的情况 -->   </div> </template> <script> import { ref, onMounted } from 'vue'; export default {   name: "",   setup() {     // 1. 获取单个元素     // 1.1 先定义一个空的响应式数据ref定义的     // 1.2 setup中返回该数据,你想获取那个dom元素,在该元素上使用ref属性绑定该数据即可。     const dom = ref(null)     onMounted(() => {         console.log(dom)     })     return { dom };   }, }; </script> <style lang='less' scoped> </style> 

利用ref获取单个元素或者组件,ref