VUE3 -在自定义组件中的已安装()或已创建()上选择元素，而不使用"event“

import { ref } from 'vue';

const myElement = ref(null); // 创建一个响应式引用对象

// 在组件中使用
<template>
  <div ref="myElement">这是一个元素</div>
</template>

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

export default {
  setup() {
    const myElement = ref(null);

    onMounted(() => {
      console.log(myElement.value); // 访问引用对象的值
      myElement.value.innerText = '修改后的元素'; // 修改引用对象的值
    });

    return {
      myElement
    };
  }
}
</script>

import { reactive } from 'vue';

const myElement = reactive({ value: null }); // 创建一个响应式代理对象

// 在组件中使用
<template>
  <div ref="myElement.value">这是一个元素</div>
</template>

<script>
import { reactive, onMounted } from 'vue';

export default {
  setup() {
    const myElement = reactive({ value: null });

    onMounted(() => {
      console.log(myElement.value); // 访问代理对象的属性
      myElement.value.innerText = '修改后的元素'; // 修改代理对象的属性
    });

    return {
      myElement
    };
  }
}
</script>