{"id":407093,"date":"2024-06-29T19:21:00","date_gmt":"2024-06-29T19:21:00","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=407093"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=407093","title":{"rendered":"<span>\u0420\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u043d\u0430 Vue<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439: \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0441\u0435\u0440\u0447\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u0432\u0435\u0434\u043e\u043c\u044b\u0435 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/74e\/3da\/0cc\/74e3da0cced04ad6b18aba86559d9086.png\" width=\"1922\" height=\"1152\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/74e\/3da\/0cc\/74e3da0cced04ad6b18aba86559d9086.png\"\/><\/figure>\n<p>\u041c\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>teleport<\/code> \u0438 <code>v-show<\/code> \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u0430\u043f\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d <code>UIState<\/code>, \u0433\u0434\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u043f\u0430 \u0432 \u0441\u0442\u043e\u0440\u0435 (Vuex\/Pinia) \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u043f\u043e\u043f\u0430\u043f.<\/p>\n<h2>\u042d\u043c\u0438\u0442\u0442\u0438\u043d\u0433 \u0438\u0432\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0435 pub\/sub. \u041a \u0441\u043b\u043e\u0432\u0443 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438 <em>\u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439<\/em> \u0441\u043f\u043e\u0441\u043e\u0431, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub \u0441\u0430\u043c\u0438, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e, \u0432\u043d\u0438\u0437\u0443 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f pub\/sub, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0432\u0435\u043d\u0442\u044b \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445.<\/p>\n<pre><code class=\"typescript\">\/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0438\u0432\u0435\u043d\u0442\u043e\u0432 export enum EmitterEvents {   SHOW_POPUP }  \/\/ \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u044d\u043c\u0438\u0442\u0442\u0435\u0440\u0430 (\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0442\u0440\u0438\u0433\u0435\u0440\u0435) type Emitter = Record&lt;EmitterEvents, Array&lt;() => void>>;  const emitter: Emitter = {   [EmitterEvents.SHOW_POPUP]: [] };  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c composable \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 export const useEmitter = () => {   const trigger = (event: EmitterEvents) => emitter[event].forEach(cb => cb());      const bind = (event: EmitterEvents, callback: () => void) => {     if (emitter[event].includes(callback)) {       console.warn('This callback is already in emitter! ?');       return;     }      emitter[event].push(callback);   }    const unbind = (event: EmitterEvents, callback: () => void) => {     const callbackIndex = emitter[event].findIndex(item => item === callback);      if (callbackIndex === -1) {        \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432       console.error(new Error('There\\'s no event to delete! ?'));       return;     }      emitter[event].splice(callbackIndex, 1);   }    return {trigger, bind, unbind}; }<\/code><\/pre>\n<p>\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043c\u0438\u0442\u0442\u0435\u0440 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u043d\u0430\u043c \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0438 \u043a \u0447\u0435\u043c\u0443, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c &#8212; \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043f\u0430\u043f \u0433\u0434\u0435-\u043b\u0438\u0431\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 App.vue) \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>useEmitter<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043f\u0430\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n<pre><code class=\"typescript\">&lt;template>   &lt;div class=\"popup\">   &lt;!-- ... -->   &lt;\/div> &lt;\/template>  &lt;script setup lang=\"ts\">   import { useEmitter, EmitterEvents } from 'composables\/useEmitter';   const isVisible = ref(false);    const { bind } = useEmitter();   bind(EmitterEvents.SHOW_POPUP, () => {     isVisible.value = true;   }) &lt;\/script><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043f\u0430\u043f &#8212; \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0434\u043b\u044f \u0438\u0432\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">&lt;template>   &lt;!-- ... -->   &lt;button @click=\"showPopup\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043f\u0430\u043f&lt;\/button>   &lt;!-- ... --> &lt;\/template>  &lt;script setup lang=\"ts\">   import { useEmitter, EmitterEvents } from 'composables\/useEmitter';   const { trigger } = useEmitter();    const showPopup = () => {     trigger(EmitterEvents.SHOW_POPUP);   }; &lt;\/script><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430:<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0435\u0433\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0431\u0430\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0432\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u043c\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c <a href=\"http:\/\/callbackhell.com\/\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0445\u044d\u043b\u043b<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u043f\u043e\u0432, \u0442\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0441\u0442\u0430-\u043a\u043e\u0434;<\/p>\n<\/li>\n<\/ul>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 provide\/inject<\/h2>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 provide\/inject \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub. \u0421\u043c\u044b\u0441\u043b \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u043f\u043e\u043f\u0430\u043f) \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0443\u0434\u0430, \u0433\u0434\u0435 \u043e\u043d \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d.<\/p>\n<blockquote>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 UIState, \u0433\u0434\u0435 \u043c\u044b \u0432 \u0441\u0442\u043e\u0440\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0443\u043b\u0435\u0432\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u044b. \u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Vue \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0438\u0437 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435:<\/p>\n<pre><code class=\"typescript\">import { reactive } from 'vue'; import type { InjectionKey } from 'vue';  export {   ourPopup: {     key: Symbol() as InjectionKey&lt;boolean>,     state: reactive({       isVisible: false,       options: {}, \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b     }),   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (App.vue), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f:<\/p>\n<pre><code class=\"typescript\">\/\/ App.vue &lt;script setup lang=\"ts\">   import { ourPopup } from '.\/popupState';   provide(ourPopup.key, ourPopup.state); &lt;\/script><\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043f\u0430\u043f\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0446\u0435\u043f\u0438\u0442\u044c\u0441\u044f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e:<\/p>\n<pre><code class=\"typescript\">\/\/ Popup.vue &lt;script setup lang=\"ts\">   import { ourPopup } from '.\/popupState';   const ourPopupState = inject(ourPopup.key); &lt;\/script><\/code><\/pre>\n<p>\u041f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ TriggerParent.vue &lt;script setup lang=\"ts\">   import {ourPopup} from '.\/popupState';   const {isVisible: isOurPopupVisible = inject(ourPopup.key);    const togglePopup(state: boolean) {     isOutPopupVisible.value = state;   } &lt;\/script><\/code><\/pre>\n<p>\u0412\u0432\u0435\u0440\u0445\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430. \u041c\u0435\u0442\u043e\u0434\u044b togglePopup \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043b\u0435\u0436\u0430\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u043e \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0440\u0435\u0448\u0438\u043b \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c ?<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u043e\u0431\u043e\u0448\u043b\u0438\u0441\u044c \u0431\u0435\u0437 pub\/sub;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0435\u0449\u0435 \u043f\u0440\u043e\u0449\u0435;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0411\u0430\u0433 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043b\u043e\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>inject<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 provide\/inject, \u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043f\u043e\u043f\u0430\u043f\u0430\u043c\u0438 \u0438 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u0441\u044f;<\/p>\n<\/li>\n<\/ul>\n<h2>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p><strong>\u0412\u0430\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c<\/strong> \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u0437\u043b\u0438\u0448\u043d\u0438\u043c, \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u0430\u0441\u0442\u0435\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<p>\u0421\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c composable, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043f\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e.  <\/p>\n<pre><code class=\"typescript\">\/\/ composable\/useOurPopup.ts import { AppContext, createApp } from 'vue' import OurPopupComponent, {ComponentProps} from '.\/Component';  interface UseOurPopupArgs {   mountNode?: Element,   props: ComponentProps,   appContext?: AppContext, }  export default function renderComponent({ mountNode, props, appContext }: UseOurPopupArgs) {   let app = createApp(OurPopupComponent, props)    if (appContext) {     Object.assign(app._context, appContext) \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f   }    const show = () => {     app       .mount(mountNode ?? document.getElementById('#popup') as Element); \/\/ \u041c\u0430\u0443\u043d\u0442\u0438\u043c \u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043d\u043e\u0434\u0435 \u0438\u043b\u0438 \u043d\u043e\u0434\u0435 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 (#popup)   };    const hide = () => {     app.unmount()   }    return {     show,     hide,   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043f\u0430\u043f &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 composable:<\/p>\n<pre><code class=\"typescript\">\/\/ ParentComponent.vue &lt;script setup lang=\"ts\">   import { useOurPopup } from 'composables\/useOurPopup';    const popup = useOurPopup();   popup.show(); &lt;\/script><\/code><\/pre>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0441\u043a\u0435\u0439\u043b\u0438\u0442\u0441\u044f. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 composable, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u043b\u0435\u0433\u043a\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0432\u044b\u0441\u043e\u043a\u0430 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438;<\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e createVNode<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u0441\u0430\u043c\u044b\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u0443\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u043e\u0434\u0443 (VNode), \u0430 \u0437\u0430\u0442\u0435\u043c \u0438 \u0432\u043e\u0432\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0435\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e, <em>\u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c composable, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u043e\u0434\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0435\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ composables\/useOurPopup.ts import { AppContext, createApp } from 'vue' import OurPopupComponent, {ComponentProps} from '.\/Component';  interface UseOurPopupArgs {   mountNode?: Element,   props: ComponentProps,   appContext?: AppContext, }  import { createVNode, render } from 'vue'  export default function useOurPopup({mountNode, props, appContext}: UseOurPopupArgs) {   let vnode = createVNode(OurPopupComponent, props)   vnode.appContext = appContext ?? null;    const show = () => {     const defaultNode = document.getElementById('#popup') as Element;     render(vnode, mountNode ?? defaultNode);   };    const hide = () => {     const defaultNode = document.getElementById('#popup') as Element;     render(null, mountNode ?? defaultNode);   };    return {     show,     hide   }; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u043c\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e. \u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043d\u0438\u0436\u0435.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e composable \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">\/\/ ParentComponent.vue &lt;script setup lang=\"ts\">   import { useOurPopup } from 'composables\/useOurPopup';    const popup = useOurPopup();   popup.show(); &lt;\/script><\/code><\/pre>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043d\u0430\u0448 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u043f\u0430\u043f\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043d\u0438\u0436\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u043a\u043e\u0443\u043f\u0435 <code>composable\/useOurPopup.ts<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0433\u0438 \u043b\u0435\u0433\u043a\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c (\u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c);<\/p>\n<\/li>\n<\/ul>\n<h4>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f ?\u00a0<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f &#8212; \u0442\u043e \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435\u00a0<a href=\"https:\/\/t.me\/developer_log\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043c\u043e\u0439 \u0431\u043b\u043e\u0433<\/a>, \u0442\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0445\u043e\u0436\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b &#8212; \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0425\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u044f\u043f\u0440\u0435\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f! ??\u200d\u2642<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/733852\/\"> https:\/\/habr.com\/ru\/articles\/733852\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041d\u0435\u0434\u0430\u0432\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f \u0441 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439: \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043b\u0438\u0441\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u0441\u0435\u0440\u0447\u0430 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u0441\u043e\u0431\u0440\u0430\u043b \u0432\u0441\u0435 \u0432\u0435\u0434\u043e\u043c\u044b\u0435 \u043c\u043d\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u044b \u0432 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435. \u041f\u043e\u0434 \u043a\u0430\u0442\u043e\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435.<\/p>\n<figure class=\"full-width\"><\/figure>\n<p>\u041c\u044b \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>teleport<\/code> \u0438 <code>v-show<\/code> \u0441 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u0432\u043d\u0443\u0442\u0440\u0438 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. \u0414\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u0442 \u0441\u043b\u0443\u0447\u0430\u0438, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043f\u0430\u043f\u044b \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u0437\u0430\u0441\u043e\u0440\u044f\u0442\u044c \u0434\u0440\u0443\u0433\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0434\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043b\u044f \u0441\u0432\u043e\u0438\u0445 \u043f\u0440\u043e\u043f\u0441\u043e\u0432. \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d <code>UIState<\/code>, \u0433\u0434\u0435 \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u043f\u0430 \u0432 \u0441\u0442\u043e\u0440\u0435 (Vuex\/Pinia) \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u043f\u043e\u043f\u0430\u043f.<\/p>\n<h2>\u042d\u043c\u0438\u0442\u0442\u0438\u043d\u0433 \u0438\u0432\u0435\u043d\u0442\u043e\u0432<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0441\u043d\u043e\u0432\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u043d\u0430 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0435 pub\/sub. \u041a \u0441\u043b\u043e\u0432\u0443 \u044d\u0442\u043e \u0441\u0430\u043c\u044b\u0439 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438 <em>\u043d\u0435\u043a\u0440\u0430\u0441\u0438\u0432\u044b\u0439<\/em> \u0441\u043f\u043e\u0441\u043e\u0431, \u0447\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u0442\u044c.<\/p>\n<p>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub \u0441\u0430\u043c\u0438, \u044d\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u0441\u043b\u043e\u0436\u043d\u043e, \u0432\u043d\u0438\u0437\u0443 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0430 \u043f\u0440\u0438\u043c\u0438\u0442\u0438\u0432\u043d\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f pub\/sub, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0438\u0432\u0435\u043d\u0442\u044b \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u043d\u0438\u0445.<\/p>\n<pre><code class=\"typescript\">\/\/ \u0421\u043f\u0438\u0441\u043e\u043a \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u043d\u043d\u044b\u0445 \u0438\u0432\u0435\u043d\u0442\u043e\u0432 export enum EmitterEvents {   SHOW_POPUP }  \/\/ \u0418\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441 \u0434\u043b\u044f \u044d\u043c\u0438\u0442\u0442\u0435\u0440\u0430 (\u043e\u0431\u044a\u0435\u043a\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \/\/ \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043f\u0440\u0438 \u0442\u0440\u0438\u0433\u0435\u0440\u0435) type Emitter = Record&lt;EmitterEvents, Array&lt;() => void>>;  const emitter: Emitter = {   [EmitterEvents.SHOW_POPUP]: [] };  \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c composable \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c \u043d\u0443\u0436\u043d\u044b\u0435 \u043d\u0430\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438 export const useEmitter = () => {   const trigger = (event: EmitterEvents) => emitter[event].forEach(cb => cb());      const bind = (event: EmitterEvents, callback: () => void) => {     if (emitter[event].includes(callback)) {       console.warn('This callback is already in emitter! ?');       return;     }      emitter[event].push(callback);   }    const unbind = (event: EmitterEvents, callback: () => void) => {     const callbackIndex = emitter[event].findIndex(item => item === callback);      if (callbackIndex === -1) {        \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0434\u043b\u044f \u043e\u0442\u0441\u043b\u0435\u0436\u0438\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u0435\u043a\u0430 \u0432\u044b\u0437\u043e\u0432\u043e\u0432       console.error(new Error('There\\'s no event to delete! ?'));       return;     }      emitter[event].splice(callbackIndex, 1);   }    return {trigger, bind, unbind}; }<\/code><\/pre>\n<p>\u0415\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u044d\u043c\u0438\u0442\u0442\u0435\u0440 \u0438 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0432 \u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0438 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b, \u043d\u043e \u043d\u0430\u043c \u043f\u043e\u043a\u0430 \u0447\u0442\u043e \u044d\u0442\u043e \u043d\u0438 \u043a \u0447\u0435\u043c\u0443, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u043a\u043d\u043e.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c &#8212; \u0440\u0430\u0437\u043c\u0435\u0441\u0442\u0438\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043f\u0430\u043f \u0433\u0434\u0435-\u043b\u0438\u0431\u043e (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 App.vue) \u0438 \u0442\u0440\u0438\u0433\u0433\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>useEmitter<\/code>.<\/p>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043f\u0430\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0430\u044f:<\/p>\n<pre><code class=\"typescript\">&lt;template>   &lt;div class=\"popup\">   &lt;!-- ... -->   &lt;\/div> &lt;\/template>  &lt;script setup lang=\"ts\">   import { useEmitter, EmitterEvents } from 'composables\/useEmitter';   const isVisible = ref(false);    const { bind } = useEmitter();   bind(EmitterEvents.SHOW_POPUP, () => {     isVisible.value = true;   }) &lt;\/script><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043f\u043e\u043f\u0430\u043f &#8212; \u043d\u0443\u0436\u043d\u043e \u043f\u0440\u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0442\u0440\u0438\u0433\u0433\u0435\u0440 \u0434\u043b\u044f \u0438\u0432\u0435\u043d\u0442\u0430:<\/p>\n<pre><code class=\"typescript\">&lt;template>   &lt;!-- ... -->   &lt;button @click=\"showPopup\">\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u043e\u043f\u0430\u043f&lt;\/button>   &lt;!-- ... --> &lt;\/template>  &lt;script setup lang=\"ts\">   import { useEmitter, EmitterEvents } from 'composables\/useEmitter';   const { trigger } = useEmitter();    const showPopup = () => {     trigger(EmitterEvents.SHOW_POPUP);   }; &lt;\/script><\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043b\u044e\u0441\u044b \u0438 \u043c\u0438\u043d\u0443\u0441\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430:<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0414\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043b\u0435\u0433\u043a\u0430\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0436\u043d\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u043d\u043e\u0432\u0435\u043d\u0438\u044f \u0431\u0430\u0433\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0438\u0432\u0435\u043d\u0442\u043e\u0432 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u043c\u043d\u043e\u0433\u043e;<\/p>\n<\/li>\n<li>\n<p>\u041b\u0435\u0433\u043a\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c <a href=\"http:\/\/callbackhell.com\/\" rel=\"noopener noreferrer nofollow\">\u043a\u043e\u043b\u043b\u0431\u044d\u043a\u0445\u044d\u043b\u043b<\/a>;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub \u0431\u0443\u0434\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043f\u043e\u043f\u0430\u043f\u043e\u0432, \u0442\u043e \u043b\u0435\u0433\u043a\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0430\u0441\u0442\u0430-\u043a\u043e\u0434;<\/p>\n<\/li>\n<\/ul>\n<h2>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 provide\/inject<\/h2>\n<p>\u0412 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 provide\/inject \u0431\u0443\u0434\u0435\u0442 \u0441\u0438\u043b\u044c\u043d\u043e \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043f\u0430\u0442\u0442\u0435\u0440\u043d pub\/sub. \u0421\u043c\u044b\u0441\u043b \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 (\u043e\u0442\u043a\u0440\u044b\u0442 \u043b\u0438 \u043f\u043e\u043f\u0430\u043f) \u0438 \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0442\u044c \u0435\u0433\u043e \u0442\u0443\u0434\u0430, \u0433\u0434\u0435 \u043e\u043d \u043d\u0430\u043c \u043d\u0443\u0436\u0435\u043d.<\/p>\n<blockquote>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u0438 \u043e\u0442 \u043f\u0430\u0442\u0442\u0435\u0440\u043d\u0430 UIState, \u0433\u0434\u0435 \u043c\u044b \u0432 \u0441\u0442\u043e\u0440\u0435 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u0443\u043b\u0435\u0432\u044b \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u043a\u0430\u043a\u0438\u0435 \u0447\u0430\u0441\u0442\u0438 \u0433\u0440\u0430\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 \u0441\u0435\u0439\u0447\u0430\u0441 \u0430\u043a\u0442\u0438\u0432\u043d\u044b. \u041e\u0442\u043b\u0438\u0447\u0438\u0435 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 Vue \u0431\u0435\u0437 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0438\u0445 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a.<\/p>\n<\/blockquote>\n<p>\u0414\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0441\u043b\u043e\u0432\u0430\u0440\u044c \u0438\u0437 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u0438 \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0444\u0430\u0439\u043b\u0435:<\/p>\n<pre><code class=\"typescript\">import { reactive } from 'vue'; import type { InjectionKey } from 'vue';  export {   ourPopup: {     key: Symbol() as InjectionKey&lt;boolean>,     state: reactive({       isVisible: false,       options: {}, \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0438 \u0442\u0438\u043f\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043f\u0441\u044b     }),   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u0443\u044e \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0443\u044e \u0432 \u043a\u043e\u0440\u043d\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f (App.vue), \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0441\u043c\u043e\u0436\u0435\u043c \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u043c \u044d\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f:<\/p>\n<pre><code class=\"typescript\">\/\/ App.vue &lt;script setup lang=\"ts\">   import { ourPopup } from '.\/popupState';   provide(ourPopup.key, ourPopup.state); &lt;\/script><\/code><\/pre>\n<p>\u0412\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043f\u0430\u043f\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u0440\u0438\u0446\u0435\u043f\u0438\u0442\u044c\u0441\u044f \u043a \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e:<\/p>\n<pre><code class=\"typescript\">\/\/ Popup.vue &lt;script setup lang=\"ts\">   import { ourPopup } from '.\/popupState';   const ourPopupState = inject(ourPopup.key); &lt;\/script><\/code><\/pre>\n<p>\u041f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u0434\u0430\u043d\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0431\u0430\u043d\u0430\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0440\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ TriggerParent.vue &lt;script setup lang=\"ts\">   import {ourPopup} from '.\/popupState';   const {isVisible: isOurPopupVisible = inject(ourPopup.key);    const togglePopup(state: boolean) {     isOutPopupVisible.value = state;   } &lt;\/script><\/code><\/pre>\n<p>\u0412\u0432\u0435\u0440\u0445\u0443 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0434\u043b\u044f \u043f\u043e\u043d\u0438\u043c\u0430\u043d\u0438\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0430. \u041c\u0435\u0442\u043e\u0434\u044b togglePopup \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0438 \u043d\u0435 \u043b\u0435\u0436\u0430\u043b\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0434\u0443\u043c\u0430\u044e \u044d\u0442\u043e \u0432\u0441\u0435\u043c \u043f\u043e\u043d\u044f\u0442\u043d\u043e, \u043d\u043e \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0440\u0435\u0448\u0438\u043b \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c ?<\/p>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u043e\u0431\u043e\u0448\u043b\u0438\u0441\u044c \u0431\u0435\u0437 pub\/sub;<\/p>\n<\/li>\n<li>\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043e\u043a\u0430\u0437\u0430\u043b\u0430\u0441\u044c \u0435\u0449\u0435 \u043f\u0440\u043e\u0449\u0435;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0411\u0430\u0433 \u0432\u0441\u0435 \u0435\u0449\u0435 \u0431\u0443\u0434\u0435\u0442 \u0441\u043b\u043e\u0436\u043d\u043e \u0441\u043b\u043e\u0432\u0438\u0442\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043b\u044e\u0431\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043c\u043e\u0436\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>inject<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u041c\u044b \u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u043c \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043c\u043d\u043e\u0433\u043e \u0434\u0430\u043d\u043d\u044b\u0445;<\/p>\n<\/li>\n<li>\n<p>\u0415\u0441\u043b\u0438 \u0431\u0443\u0434\u0443\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 provide\/inject, \u0442\u043e \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u043f\u043e\u043f\u0430\u043f\u0430\u043c\u0438 \u0438 \u0438\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\u043c\u0438 \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442\u0441\u044f;<\/p>\n<\/li>\n<\/ul>\n<h2>\u041e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435<\/h2>\n<p><strong>\u0412\u0430\u0436\u043d\u043e \u0443\u0442\u043e\u0447\u043d\u0438\u0442\u044c<\/strong> \u0447\u0442\u043e \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430 \u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0438\u0437\u043b\u0438\u0448\u043d\u0438\u043c, \u0445\u043e\u0442\u044f \u0431\u044b \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0441\u0438\u043b\u044c\u043d\u043e \u0432\u044b\u0440\u0430\u0441\u0442\u0435\u0442, \u043e\u0434\u043d\u0430\u043a\u043e \u044d\u0442\u043e\u0442 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0442\u043e\u0436\u0435 \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c.<\/p>\n<p>\u0421\u043f\u043e\u0441\u043e\u0431 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e\u0439: \u043c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c composable, \u0432 \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0441\u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u0434\u0430\u0442\u044c \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u043f\u0441\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u043e \u043e\u0442\u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c, \u0430 \u0437\u0430\u0442\u0435\u043c \u043f\u0440\u0438\u043c\u043e\u043d\u0442\u0438\u0440\u0443\u0435\u043c \u0435\u0433\u043e.  <\/p>\n<pre><code class=\"typescript\">\/\/ composable\/useOurPopup.ts import { AppContext, createApp } from 'vue' import OurPopupComponent, {ComponentProps} from '.\/Component';  interface UseOurPopupArgs {   mountNode?: Element,   props: ComponentProps,   appContext?: AppContext, }  export default function renderComponent({ mountNode, props, appContext }: UseOurPopupArgs) {   let app = createApp(OurPopupComponent, props)    if (appContext) {     Object.assign(app._context, appContext) \/\/ \u0414\u043e\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f   }    const show = () => {     app       .mount(mountNode ?? document.getElementById('#popup') as Element); \/\/ \u041c\u0430\u0443\u043d\u0442\u0438\u043c \u043a \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u043d\u043e\u0434\u0435 \u0438\u043b\u0438 \u043d\u043e\u0434\u0435 \u043f\u043e \u0434\u0435\u0444\u043e\u043b\u0442\u0443 (#popup)   };    const hide = () => {     app.unmount()   }    return {     show,     hide,   } }<\/code><\/pre>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u0432\u0441\u0435 \u0447\u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0435 \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0448 \u043f\u043e\u043f\u0430\u043f &#8212; \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u043e\u0437\u0434\u0430\u043d\u043d\u044b\u0439 \u043d\u0430\u043c\u0438 composable:<\/p>\n<pre><code class=\"typescript\">\/\/ ParentComponent.vue &lt;script setup lang=\"ts\">   import { useOurPopup } from 'composables\/useOurPopup';    const popup = useOurPopup();   popup.show(); &lt;\/script><\/code><\/pre>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u043f\u043e\u043f\u0430\u043f\u043e\u0432 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u0441\u043a\u0435\u0439\u043b\u0438\u0442\u0441\u044f. \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0437\u043c\u0435\u043d\u044f\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0434\u0438\u043d \u0444\u0430\u0439\u043b;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 composable, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043d\u0435 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0433\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0439 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0432\u0438\u0434\u0438\u043c\u043e\u0441\u0442\u0438;<\/p>\n<\/li>\n<li>\n<p>\u041a\u043e\u0434 \u043b\u0435\u0433\u043a\u043e \u043e\u0442\u043b\u0430\u0436\u0438\u0432\u0430\u0442\u044c;<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u041c\u0438\u043d\u0443\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043f\u0430\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435, \u0438\u0437-\u0437\u0430 \u0447\u0435\u0433\u043e \u0432\u044b\u0441\u043e\u043a\u0430 \u0432\u0435\u0440\u043e\u044f\u0442\u043d\u043e\u0441\u0442\u044c \u0443\u0442\u0435\u0447\u043a\u0438 \u043f\u0430\u043c\u044f\u0442\u0438;<\/p>\n<\/li>\n<\/ul>\n<h2>\u0412\u043d\u0435\u0448\u043d\u0438\u0439 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e createVNode<\/h2>\n<p>\u0414\u0430\u043d\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u044f \u0441\u0447\u0438\u0442\u0430\u044e \u0441\u0430\u043c\u044b\u043c \u043b\u0443\u0447\u0448\u0438\u043c \u0434\u043b\u044f \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430 \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0445 \u043e\u043a\u043e\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0421\u0443\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u043e\u0434\u0443 (VNode), \u0430 \u0437\u0430\u0442\u0435\u043c \u0438 \u0432\u043e\u0432\u0441\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0435\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e, <em>\u0431\u0435\u0437 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f<\/em>.<\/p>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0441\u043e\u0437\u0434\u0430\u0442\u044c composable, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u0430\u0448\u0443 \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u0443\u044e \u043d\u043e\u0434\u0443 \u0438 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u0442\u044c \u0435\u0435:<\/p>\n<pre><code class=\"typescript\">\/\/ composables\/useOurPopup.ts import { AppContext, createApp } from 'vue' import OurPopupComponent, {ComponentProps} from '.\/Component';  interface UseOurPopupArgs {   mountNode?: Element,   props: ComponentProps,   appContext?: AppContext, }  import { createVNode, render } from 'vue'  export default function useOurPopup({mountNode, props, appContext}: UseOurPopupArgs) {   let vnode = createVNode(OurPopupComponent, props)   vnode.appContext = appContext ?? null;    const show = () => {     const defaultNode = document.getElementById('#popup') as Element;     render(vnode, mountNode ?? defaultNode);   };    const hide = () => {     const defaultNode = document.getElementById('#popup') as Element;     render(null, mountNode ?? defaultNode);   };    return {     show,     hide   }; }<\/code><\/pre>\n<p>\u041c\u043e\u0436\u0435\u0442 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u0447\u0442\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c, \u043e\u0434\u043d\u0430\u043a\u043e \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0444\u0440\u0430\u0433\u043c\u0435\u043d\u0442\u0435 \u043a\u043e\u0434\u0430 \u043c\u044b \u0432\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0430\u043f\u0440\u044f\u043c\u0443\u044e \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043c \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0432 DOM-\u0434\u0435\u0440\u0435\u0432\u043e. \u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043d\u0438\u0436\u0435.<\/p>\n<p>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u043e\u0433\u043e composable \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u043e\u0442\u043b\u0438\u0447\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043c\u044b \u0432\u0438\u0434\u0435\u043b\u0438 \u043f\u0440\u0438 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f:<\/p>\n<pre><code class=\"typescript\">\/\/ ParentComponent.vue &lt;script setup lang=\"ts\">   import { useOurPopup } from 'composables\/useOurPopup';    const popup = useOurPopup();   popup.show(); &lt;\/script><\/code><\/pre>\n<p><strong>\u041f\u043b\u044e\u0441\u044b<\/strong>:<\/p>\n<ul>\n<li>\n<p>\u041c\u044b \u043b\u0435\u0433\u043a\u043e \u043c\u043e\u0436\u0435\u043c \u0440\u0430\u0441\u0448\u0438\u0440\u044f\u0442\u044c \u043d\u0430\u0448 \u043d\u0430\u0431\u043e\u0440 \u043f\u043e\u043f\u0430\u043f\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u041f\u043e\u0442\u0440\u0435\u0431\u043b\u0435\u043d\u0438\u0435 \u043f\u0430\u043c\u044f\u0442\u0438 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u043d\u0438\u0436\u0435 \u043f\u043e \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044e \u0441 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u043c \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u043c;<\/p>\n<\/li>\n<li>\n<p>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430\u0445\u043e\u0434\u044f\u0442\u0441\u044f \u0432 \u0441\u043a\u043e\u0443\u043f\u0435 <code>composable\/useOurPopup.ts<\/code>;<\/p>\n<\/li>\n<li>\n<p>\u0411\u0430\u0433\u0438 \u043b\u0435\u0433\u043a\u043e \u043e\u0442\u0441\u043b\u0435\u0434\u0438\u0442\u044c (\u043e\u0442\u043b\u0430\u0434\u0438\u0442\u044c);<\/p>\n<\/li>\n<\/ul>\n<h4>\u0412\u043c\u0435\u0441\u0442\u043e \u0437\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f ?\u00a0<\/h4>\n<p>\u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043f\u043e\u043d\u0440\u0430\u0432\u0438\u043b\u0430\u0441\u044c \u0434\u0430\u043d\u043d\u0430\u044f \u0441\u0442\u0430\u0442\u044c\u044f &#8212; \u0442\u043e \u0432\u044b \u0432\u0441\u0435\u0433\u0434\u0430 \u043c\u043e\u0436\u0435\u0442\u0435\u00a0<a href=\"https:\/\/t.me\/developer_log\" rel=\"noopener noreferrer nofollow\">\u043f\u0435\u0440\u0435\u0439\u0442\u0438 \u0432 \u043c\u043e\u0439 \u0431\u043b\u043e\u0433<\/a>, \u0442\u0430\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0441\u0445\u043e\u0436\u0435\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u0432\u0435\u0431-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435.<\/p>\n<p>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0441\u0442\u0430\u043b\u0438\u0441\u044c \u0432\u043e\u043f\u0440\u043e\u0441\u044b &#8212; \u043d\u0435 \u0441\u0442\u0435\u0441\u043d\u044f\u0439\u0442\u0435\u0441\u044c \u0437\u0430\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445. \u0425\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u0432\u0440\u0435\u043c\u044f\u043f\u0440\u0435\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u044f! ??\u200d\u2642<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/733852\/\"> https:\/\/habr.com\/ru\/articles\/733852\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-407093","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=407093"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/407093\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=407093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=407093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=407093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}