На самом деле существует много способов взаимодействия между родительскими и дочерними компонентами Vue.Эта статья предназначена только для того, чтобы сделать краткий обзор, рассказать об их преимуществах и недостатках, а также о том, как использовать соответствующие документы, и онлайн-мастера обобщили многие из них, поэтому я не буду не объяснять их здесь.
1.Vuex
представлять
Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения, А соответствующие правила обеспечивают предсказуемое изменение состояния. Vuex также интегрирован в официальное расширение devtools инструмента отладки Vue, Предоставляет расширенные функции отладки, такие как отладка во времени с нулевой конфигурацией, импорт и экспорт моментальных снимков состояния и т. д.
Vuex — один из инструментов, который я часто использую в своих проектах, и я думаю, что каждый будет часто использовать его в проектах.
инструкции
Преимущества и недостатки
- преимущество
- Для решения сложных событий разбросаны многослойные сборки.
- Решена проблема, связанная с тем, что несколько компонентов зависят от одного и того же состояния.
- Однонаправленный поток данных
- Адаптировано для Vue, стоимость обучения невысока.
- недостаток
- Сохранение данных невозможно. Обновление страницы потребует переделки. Для сохранения данных рассмотрите возможность использования локального хранилища.
- Добавьте дополнительный размер кода, и это не рекомендуется для простых бизнес-сценариев.
2.EventBus
представлять
При совместном использовании экземпляра vue используйте $on и $emit экземпляра для передачи данных.
инструкции
Вот простой способ его использования
// bus.js
import Vue from 'vue'
export default new Vue({})
// component-a.js
import bus from './bus.js'
export default {
created () {
bus.$on('event-name', (preload) => {
// ...
})
}
}
// component-b.js
import bus from './bus.js'
export default {
created () {
bus.$emit('event-name', preload)
}
}
Преимущества и недостатки
- преимущество
- Устранено утомительное распространение событий между многоуровневыми компонентами.
- Принцип использования очень прост, а объем кода небольшой.
- недостаток
- Поскольку используется экземпляр Vue, он подвержен повторяющимся сценариям срабатывания, например:
- В многопользовательской разработке A и B определяют одно и то же имя события.
- Обе страницы определяют одно и то же имя события и не уничтожаются с помощью $off (часто при переключении маршрутизации).
- Зарегистрируйтесь в компоненте, который выходит из for.
- Управление событиями таким образом в проекте будет очень запутанным, поэтому в настоящее время рекомендуется использовать vuex.
- Поскольку используется экземпляр Vue, он подвержен повторяющимся сценариям срабатывания, например:
3.props и $emit/$on
представлять
Наиболее основным способом передачи данных из родительского компонента к дочернему компоненту является прохождение наших пользовательских атрибутов для дочернего компонента. Дочерний компонент вызывает событие V-на событии родительского компонента через метод $ emit, чтобы дочерний компонент запускает метод родительского компонента.
инструкции
Преимущества и недостатки
-
преимущество
- Это самый простой в использовании и наиболее распространенный способ передачи компонентов родитель-потомок.
- Vue предоставляет поддержку для проверки типа реквизиты.
- $emit не изменит событие с тем же именем других компонентов, потому что оно может вызвать только событие родителя, которое отличается от шины событий.
-
недостаток
- Одиночный компонентный уровень нужно проходить слой за слоем, и будет много лишнего кода.
- Это не может решить проблему, когда несколько компонентов зависят от одного и того же состояния.
Tips
$attrs/$listeners могут наследовать реквизиты и прослушиватели событий родительского компонента для дочерних элементов, а дочерний компонент может вызывать события и реквизиты родительского компонента.
4.provide/inject
представлять
Данные/метод предоставляются дочернему компоненту посредством предоставления в родительском компоненте, а внедренные данные/метод получаются в дочернем компоненте посредством внедрения.
инструкции
Преимущества и недостатки
- преимущество
- Нам не нравится, когда слои реквизита проходят через иерархию.
- недостаток
- Свойства, передаваемые таким образом, не являются реактивными, поэтому старайтесь как можно чаще передавать некоторые статические свойства.
- Цитата с официального сайта
它将你的应用以目前的组件组织方式耦合了起来，使重构变得更加困难。, мое понимание этого предложения таково, что если вы используете Provide/inject, вы должны следовать его методу организации компонентов.Если вы хотите уничтожить этот метод организации при рефакторинге проекта, будут дополнительные затраты на разработку.На самом деле, у event-bus тоже есть эта проблема.
5.slot
представлять
Вы можете добавить пользовательский контент в HTML-шаблон компонента, этот контент может быть любым шаблоном кода, например:
<navigation-link url="/profile">
<!-- 添加一个 Font Awesome 图标 -->
<span class="fa fa-user"></span>
Your Profile
</navigation-link>
Все в родительской компонентной шаблоне будет скомпилирован в родительской области; все вещи субменовых шаблонов скомпилированы в области детской области.
Вы также можете пройтиslot-scopeАтрибут для передачи некоторой информации от дочернего компонента к родительскому компоненту.Обратите внимание, что этот атрибут является новым в vue2.1.0+.
инструкции
Преимущества и недостатки
- преимущество
- Содержимое, вставленное в дочерний компонент, можно настроить в родительском компоненте.Хотя можно использовать и другие свойства, я думаю, что слот более склонен к настройке условия, исходящего из родительского контейнера.
- Хорошая возможность повторного использования, подходящая для разработки компонентов.
- недостаток
- Как и реквизит, он не поддерживает межуровневую передачу.
6.$parent/$children
представлять
Через $parent/$children вы можете получить экземпляр родительско-дочернего компонента, чтобы вызвать метод в экземпляре для реализации связи между родительско-дочерним компонентом. Эта практика не рекомендуется.
инструкции
пройти черезthis.$parentилиthis.$childrenПолучите экземпляр родительского или дочернего компонента.официальный портал
Преимущества и недостатки
- преимущество
- Вы можете получить экземпляр родительского и дочернего компонентов, чтобы иметь все свойства в экземпляре.
- недостаток
- Компоненты, написанные таким образом, очень сложно поддерживать, потому что вы не знаете, откуда берутся данные, что противоречит принципу одностороннего потока данных.
-
this.$childrenТо, что вы получаете, представляет собой массив, и вы не можете точно найти позицию искомого подкомпонента, особенно когда подкомпонентов много.