Vue 3 Произвольный портал - Телепорт

18 сентября 2020 г. Юда выпустилVue 3.0, кодовое названиеOne Piece. При этом китайская и английская версии документов вышли одна за другой.Автор тоже прочитал и нашел много сокровищ.Одна из новых фич меня очень привлекла——Teleport (Китайский перевод: входящий, немного странно читать, эта статья унифицирована на английском языкеTeleportГоворящий)

если используетсяReactстуденты, возможно, дляPortalsболее знакомый,смотрите подробности. РеагироватьPortalПредоставляет способ рендеринга дочерних узлов вне родительского компонента.DOMОтличное решение для узла, я так понимаю,Vue 3серединаTeleportЭто похоже на это

существуетVue2, если вы хотите добиться подобных функций, вам нужно передать стороннюю библиотекуportal-vueДля достижения этого, если вам интересно, вы можете узнать об этом

В этой статье в основном обсуждаются следующие два момента:

Teleportчто это такое? Какую проблему он решает?
Представить с небольшим примеромTeleportиспользование

Зачем нужен телепорт

Teleportспособ переместить наш шаблон вDOMсерединаVue appТехнология в других локациях немного похожа на «произвольную дверь» Дораэмона.

сцена: нравитсяmodals,toastи т.д. такие элементы, во многих случаях мы полностью совмещаем их с нашимиVueПрименяемыйDOMПолностью раздетый, будет гораздо удобнее и проще в управлении

Причина в том, что если мы вкладываем вVueвнутри компонента, затем обрабатывать позиционирование вложенных компонентов,z-indexи укладка становится сложной

Так же какmodals,toastТакие элементы необходимо использовать дляVueсостояние компонента (dataилиprops) стоимость

ЭтоTeleportГде это пригодится. Мы можем написать код шаблона в логическом месте компонента, что означает, что мы можем использоватьdataилиprops. затем вVueвывести его за рамки приложения

Использование телепорта

Подготовить

быстро построить одинvue3проект

$ npm init vite-app learn-vue3
$ cd learn-vue3
$ npm install
$ npm run dev

использоватьyarn

$ yarn create vite-app learn-vue3
$ cd learn-vue3
$ yarn
$ yarn dev

Открыть:http://localhost:3000/, см. следующую страницу, указывающую на успех

toast

index.htmlсередина

  <div id="app"></div>
+  <div id="teleport-target"></div>
  <script type="module" src="/src/main.js"></script>

src/components/HelloWorld.vue, добавьте следующее, обратите вниманиеtoсвойства с вышеперечисленнымidСелектор соответствует

  <button @click="showToast" class="btn">打开 toast</button>
  <!-- to 属性就是目标位置 -->
  <teleport to="#teleport-target">
    <div v-if="visible" class="toast-wrap">
      <div class="toast-msg">我是一个 Toast 文案</div>
    </div>
  </teleport>

import { ref } from 'vue';
export default {
  setup() {
    // toast 的封装
    const visible = ref(false);
    let timer;
    const showToast = () => {
      visible.value = true;
      clearTimeout(timer);
      timer = setTimeout(() => {
        visible.value = false;
      }, 2000);
    }
    return {
      visible,
      showToast
    }
  }
}

Показать результаты:

Как видите, мы используемteleportкомпоненты, черезtoсвойство, указывающее, где компонент визуализируется с помощью<div id="app"></div>сверстников, то есть вbodyвниз, ноteleportположение делvisibleопять же полностью изнутриVueкомпонент управления

Работа с компонентами Vue - модальный

если<teleport>ВключатьVueкомпонент, он все равно будет<teleport>логический дочерний компонент родительского компонента

Далее мы используемmodalКомпоненты в качестве примера

  <div id="app"></div>
  <div id="teleport-target"></div>
+  <div id="modal-container"></div>
  <script type="module" src="/src/main.js"></script>

  <teleport to="#modal-container">
    <!-- use the modal component, pass in the prop -->
    <modal :show="showModal" @close="showModal = false">
      <template #header>
        <h3>custom header</h3>
      </template>
    </modal>
  </teleport>

Основной код JS выглядит следующим образом:

import { ref } from 'vue';
import Modal from './Modal.vue';
export default {
  components: {
    Modal
  },
  setup() {
    // modal 的封装
    const showModal = ref(false);
    return {
      showModal
    }
  }
}

В этом случае, даже если он отображается в другом местеModal, он по-прежнему будет текущим компонентом (вызовModalкомпонента) и получит от негоshow prop

Это также означает, что инъекция из родительского компонента работает должным образом, а дочерний компонент будет вложен вVue Devtoolsниже родительского компонента в

увидеть фактический эффект иVue Devtoolсередина

Суммировать

Эта статья в основном знакомитVue 3Новые возможности -Teleport, от чего использоватьTeleport, и через два небольшихdemo, чтобы продемонстрировать его основное использование, я надеюсь, что это может помочь вам

Весь код, использованный в этой статье, был загружен наGithub, чтобы просмотреть код и эффект, вы также можете напрямую передатьпесочница

Ссылаться на

Введение в Vue Teleport — новая функция в Vue3
входящий