Все средства связи доступны здесь
Пишите впереди
В этой статье используется способ написания <script setup />, который свободнее, чем API опций. Затем мы поговорим о следующих семи способах взаимодействия компонентов:
- реквизит
- испускают
- v-модель
- судьи
- предоставить/ввести
- СобытиеАвтобус
- vuex/пиния
Возьмите пример
В этой статье будет использоваться следующая демонстрация, как показано на следующем рисунке:
На приведенном выше рисунке список и поле ввода являются соответственно родительским и дочерним компонентами. В соответствии с различными способами связи родительский и дочерний компоненты будут скорректированы.
1. Реквизит
Реквизиты — это наиболее распространенный способ общения родителей и детей в Vue, и его относительно просто использовать.
В соответствии с приведенной выше демонстрацией мы определяем данные и операции над данными в родительском компоненте, а дочерний компонент только отображает список.
The parent component code is as follows:
Дочернему компоненту нужно только отображать значение, переданное родительским компонентом.
The code is as follows:
2. излучать
Emit также является наиболее распространенным способом взаимодействия компонентов в Vue, который используется дочерними компонентами для передачи сообщений родительским компонентам.
Мы определяем список в родительском компоненте, а дочернему компоненту нужно только передать добавленное значение.
The child component code is as follows:
После нажатия кнопки [Добавить] в дочернем компоненте мы генерируем пользовательское событие и передаем добавленное значение родительскому компоненту в качестве параметра.
The parent component code is as follows:
В родительском компоненте вам нужно только прослушивать пользовательские события дочернего компонента, а затем выполнять соответствующую логику добавления.
3. v-модель
v-model — отличный синтаксический сахар в Vue, например следующий код.
<ChildComponent v-model:title="pageTitle" />Это сокращенная форма следующего кода
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />Это действительно намного проще. Теперь мы будем использовать v-модель для реализации приведенного выше примера.
child component
В дочернем компоненте мы сначала определяем реквизиты и генерируем, а затем генерируем указанное событие после завершения добавления.
Примечание. update:* — это фиксированный способ написания в Vue, а * представляет имя свойства в свойствах.
Его относительно просто использовать в родительском компоненте, код выглядит следующим образом:
4. ссылки
При использовании option API мы можем получить указанный элемент или компонент через this.$refs.name, но не в комбинированном API. Если мы хотим получить его по ссылке, нам нужно определить объект Ref с тем же именем, к которому можно получить доступ после монтирования компонента.
The sample code is as follows:
The child component code is as follows:
Примечание. По умолчанию компонент установки закрыт для получения общедоступного экземпляра компонента через ссылку на шаблон. Если вам нужно открыть его, вам нужно сделать это через defineExpose API.
5. предоставить/ввести
Предоставление и внедрение — это пара API-интерфейсов, предоставляемых в Vue. Каким бы глубоким ни был уровень, API может реализовать передачу данных от родительских компонентов к дочерним.
The sample code looks like this:
parent component
child component
Примечание. При использовании предоставления для передачи данных попробуйте упаковать данные только для чтения, чтобы избежать изменения данных, переданных родительским компонентом, подкомпонентами.
6. шина событий
EventBus убран в Vue 3, но это можно сделать с помощью сторонних инструментов. Vue официально рекомендует mitt или tiny-emitter. В большинстве случаев не рекомендуется использовать глобальную шину событий для реализации связи между компонентами. Хотя это относительно просто и грубо, поддержка шины событий в долгосрочной перспективе является большой проблемой, поэтому я не буду объяснять это здесь. Для получения подробной информации вы можете прочитать документацию конкретного инструмента.
7. Vuex и Пиния
Vuex и Pinia — это инструменты управления состоянием в Vue 3. С помощью этих двух инструментов можно легко реализовать взаимодействие между компонентами. Поскольку эти два инструмента являются относительно мощными, они не будут здесь показаны. Для получения подробной информации обратитесь к документации.
Окончательно
На этом статья заканчивается, ничего сложного.
Спасибо за прочтение.
Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.
