Как визуализировать экземпляр компонента с помощью функции h() в Vuejs?
У меня есть компонент Vuejs, который выглядит так:
<template>
<button @click = "generateItem()">Add item</button>
<div class = "container"></div>
</template>
<script setup>
import { h } from 'vue'
import MyItem from '@/components/MyItem.vue'
function generateItem(){
return h(MyItem)
}
</script>
Я пытаюсь использовать функцию h() для визуализации экземпляра MyItem внутри div.container при запуске generateItem(). Но после прочтения официальной документации Vuejs по функции h() я не понимаю, как это сделать. Мысли о том, как это сделать?
@kissu, как мне вставить vNode в DOM? Должен ли я использовать функцию рендеринга?
Если вам нужна функция рендеринга, я помещу ее в компонент и v-if при необходимости. Вы тоже можете пойти по этому пути, но прежде всего нужно знать, нужна ли вам вообще функция рендеринга. Чего именно вы пытаетесь достичь?
@kissu компонент, который я пытаюсь отобразить, — это всплывающее уведомление. Я бы хотел, чтобы он отображался, когда я вызываю определенную функцию.
Я не уверен, чем это может быть полезно для всплывающего уведомления, попробуйте лучше это . Есть пример модального окна, не слишком отличающийся от тоста. Функции рендеринга здесь бесполезны.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я считаю, что функция рендеринга не предназначена для использования с <script setup>.
Он используется как гибкая альтернатива программному объявлению функции рендеринга вместо использования template внутри Vue SFC.
Тем не менее, вы можете добиться рендеринга сгенерированного элемента следующим образом:
<script setup>
import { h, ref, shallowRef } from 'vue'
import MyItem from './MyItem.vue'
const component = shallowRef(null)
function generateItem(){
component.value = MyItem
}
</script>
<template>
<button @click = "generateItem()">Add item</button>
<div class = "container">
<component v-if = "component" :is = "component" :testStr = "'The test str from App.vue'"></component>
</div>
</template>
(см. URL-адрес этой игровой площадки здесь: Vue SFC Playground)
Это также работает, если вы используете h(), но я считаю, что в этом нет необходимости:
component.value = h(MyItem)
Поскольку MyItem будет использоваться в качестве всплывающего уведомления, мне нужно будет создать несколько. Если я использую <компонент> в качестве заполнителя, он будет отображать все уведомления в одном и том же слоте, а не накладывать новые уведомления друг на друга, верно?
Зависит от стиля ваших компонентов, но вы должны иметь возможность визуализировать их все и соответствующим образом стилизовать их, используя v-for и css.
Используйте v-for (адаптируйте под свои нужды):
<template>
<button @click = "generateItem()">Add item</button>
<div class = "container">
<my-item v-for = "item in items">{{ item }}</my-item>
</div>
</template>
<script setup>
import { reactive } from 'vue'
import MyItem from './MyItem.vue'
const items = reactive([]);
let counter = 1;
function generateItem(){
items.push('Item ' + counter++)
}
</script>
Возможно, функция уже работает, но вам нужно указать ей место для вставки сгенерированного виртуального узла. Возможно, попробуйте использовать
v-ifгде-нибудь в вашем шаблоне, чтобы затем вставить новый компонент. Кроме того, нужны ли вам здесь функции рендеринга? Не можете ли вы вставить компонент напрямую?