Vue3中获取DOM元素的几种方法

<script setup>
import {onMounted, ref} from "vue";

const boxRef = ref();

onMounted(() => {
  console.log(boxRef.value);
  boxRef.value.style.backgroundColor = "red"; // 设置背景色
  const myWidth = boxRef.value.clientWidth; // 获取属性
  console.log(myWidth);
});
</script>

<template>
  <div ref="boxRef"></div>
</template>

<style scoped>
div {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

<script setup>
import {onMounted, ref} from "vue";

const itemRefs = ref([]);
const list = ref([{id: 1, name: "A"}, {id: 2, name: "B"}, {id: 3, name: "C"}]);
const setItemRef = (el) => {
  if (el)
    itemRefs.value.push(el);
};

onMounted(() => {
  for (const el of itemRefs.value) {
    console.log(el.innerText);
  }
});
</script>

<template>
  <ul>
    <li v-for="item in list" :key="item.id" :ref="setItemRef">
      {{ item.name }}
    </li>
  </ul>
</template>

<style scoped>
div {
  width: 100px;
  height: 100px;
  margin: 10px;
}
</style>

<script setup>
import {ref} from "vue";

const boxRef = ref();

defineExpose({boxRef});
</script>

<template>
  <div ref="boxRef">
    hello world
  </div>
</template>

<script setup>
import Child from "@/components/Child.vue";
import {onMounted, ref} from "vue";

const childRef = ref();

onMounted(() => {
  const el = childRef.value.boxRef;
  console.log(el.innerText);
});
</script>

<template>
  <Child ref="childRef"/>
</template>

<script setup>
import Child from "@/components/Child.vue";
import {onMounted, ref} from "vue";

const childRef = ref();

onMounted(() => {
  const el = childRef.value.$el;
  console.log(el.innerText);
});
</script>

<template>
  <Child ref="childRef"/>
</template>