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

在Vue3中，可以使用ref或reactive来创建响应式数据。而在自定义组件中，可以通过ref或reactive创建的响应式数据来选择元素，而不使用"event"。

ref是Vue3中用于创建响应式数据的函数。它接受一个初始值作为参数，并返回一个响应式的引用对象。可以通过.value来访问和修改引用对象的值。

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>

reactive是Vue3中用于创建响应式对象的函数。它接受一个普通对象作为参数，并返回一个响应式的代理对象。可以直接访问和修改代理对象的属性。

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>

以上是在Vue3中使用ref和reactive来创建响应式数据，并在自定义组件中选择元素的示例。在实际应用中，可以根据具体需求选择适合的方式来创建和操作响应式数据。

关于Vue3的更多信息和详细介绍，可以参考腾讯云的相关产品和文档：