Как получить все элементы компонента Vue3?
Код: main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Код App.vue:
<template>
<div>Элемент 1</div>
<div>Элемент 2</div>
</template>
<script>
import { onMounted, getCurrentInstance } from "vue";
export default {
setup() {
// В обработчике надо получить все элементы <template>
onMounted(() => {
console.log(getCurrentInstance().ctx);
// Это работает если есть один корневой элемент
// console.log(getCurrentInstance().ctx.$el);
});
},
};
</script>
ctx.$el возвращает корневой элемент <template>, только в таком варианте:
<template>
<div>
<div>Элемент 1</div>
<div>Элемент 2</div>
</div>
</template>
// ...
console.log(getCurrentInstance().ctx.$el) // <div>...</div>
Возможно ли получить список элементов без привязки ref="refElement"?
Ответы (1 шт):
Автор решения: Alexander Lonberg
→ Ссылка
Оказывается, есть такое свойство subTree, которое содержит все фрагменты компонента:
getCurrentInstance().subTree.children.map(({ el }) => el)
// => [element, ...]
Вот только в документации я ничего не нашел.