Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

введение

Vue 3 представляет Composition API, который обеспечивает новую гибкость и мощь взаимодействия компонентов.

Основы взаимодействия компонентов

Определение и функции компонентов

При фронтенд-разработке компоненты можно рассматривать как независимые единицы, которые создают пользовательский интерфейс. Он инкапсулирует определенные функции и стили, может использоваться повторно, разрабатываться и тестироваться независимо от других частей. Основная функция компонентов — улучшение возможности повторного использования кода, удобства сопровождения и масштабируемости. Разделив интерфейс на несколько компонентов, разработчики могут легче управлять сложными приложениями, а каждый компонент можно оптимизировать для повышения общей эффективности разработки и производительности приложений.

Дерево компонентов и взаимосвязь родительских и дочерних компонентов

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

• Отношения родительско-дочерних компонентов : В дереве компонентов компонент может создавать другой компонент. В этом случае создатель называется родительским компонентом, а созданный компонент — дочерним компонентом. Родительские компоненты могут передавать данные и методы дочерним компонентам, а дочерние компоненты могут отправлять информацию родительским компонентам через события. Эти родительско-дочерние отношения являются основой взаимодействия компонентов.
• Отношения родственных компонентов : Несколько дочерних компонентов одного и того же родительского компонента являются отношениями родственных компонентов. Родственные компоненты не могут напрямую взаимодействовать друг с другом, и связь между ними обычно необходимо передавать через родительский компонент.
• Отношения компонентов предка и потомка : В дереве компонентов родительский компонент родительского компонента является компонентом-предком, а дочерний компонент дочернего компонента является компонентом-потомком. Эта связь особенно важна при работе с глубоко вложенными компонентами.

Концепции деревьев компонентов и отношений родительских и дочерних компонентов имеют решающее значение для понимания взаимодействия компонентов. Освоение этих базовых знаний может помочь разработчикам более эффективно проектировать и реализовывать механизмы связи между компонентами.

Связь родительско-дочерних компонентов (Vue 3)

Родитель передает данные дочернему элементу (реквизит)

Что такое реквизит
Props — это механизм, позволяющий родительским компонентам передавать данные дочерним компонентам.В Vue 3 используйтеdefinePropsAPI используется для объявления получения реквизитов, что поддерживает односторонний поток данных и обеспечивает независимость и возможность повторного использования компонентов.

Как передать реквизит в родительский компонент
В шаблоне родительского компонента используйтеv-bindили аббревиатура:Чтобы привязать данные:

<template>
   <ChildComponent :my-prop="parentData" />
</template>

здесь,:my-propУказывает, что это динамически связанный реквизит,parentDataОпределены ли данные в родительском компоненте?。

Как получить реквизиты в дочернем компоненте
В дочернем компоненте используйтеdefinePropsЧтобы объявить полученные реквизиты:

<script setup>
import { defineProps } from 'vue';
 
const props = defineProps({
   myProp: String
});
</script>

существовать<script setup>В синтаксическом сахареdefinePropsАвтоматически отображает реквизиты как адаптивные свойства компонента.。

Дочерний элемент передает событие родителю (Emit)

что такое выброс
Emit — это механизм, позволяющий дочерним компонентам отправлять сообщения родительским компонентам.В Vue 3 используйтеdefineEmitsAPI для объявления событий, которые могут быть созданы, и использованияemitфункция для запуска событий.

Как вызвать событие в дочернем компоненте
В методе дочернего компонента используйте defineEmits объявлять события, которые могут быть созданы, и использовать emit для запуска:

<script setup>
import { defineEmits } from 'vue';
 
const emit = defineEmits(['my-event']);
 
function triggerEvent() {
   emit('my-event', dataToPass);
}
</script>

defineEmitsиспользуется для объявления событий, которые может генерировать компонент, аemitФункции используются для запуска этих событий.

Как прослушивать события дочернего компонента в родительском компоненте
В шаблоне родительского компонентаиспользоватьv-onили аббревиатура@ Чтобы прослушивать события, создаваемые дочерними компонентами:

<template>
   <ChildComponent @my-event="handleEvent" />
//或者<ChildComponent v-on:my-event="handleEvent" />
</template>

здесь,@my-eventУказывает, что подкомпонент прослушивания излучаетmy-eventсобытие,handleEventЭто метод, определенный в родительском компоненте. Когда событие сработает, этот метод будет вызван.

Комплексный пример

Предположим, что есть родительский компонентParentComponentи подкомпонентChildComponentродительский компонент должен передать данные дочернему компоненту, а дочерний компонент должен уведомить родительский компонент после определенной операции.

родительский компонентParentComponent.vue

<template>
   <ChildComponent :my-prop="parentData" @child-event="handleChildEvent" />
</template>
 
<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';
 
const parentData = ref('initial data');
const handleChildEvent = (data) => {
   console.log('Received data from child:', data);
};
</script>

ПодсборкаChildComponent.vue

<template>
   <button @click="sendDataToParent">Send Data to Parent</button>
</template>
 
<script setup>
import { defineProps, defineEmits } from 'vue';
 
const props = defineProps({
   myProp: String
});
 
const emit = defineEmits(['child-event']);
 
function sendDataToParent() {
   emit('child-event', props.myProp);
}
</script>

В этом примере родительский компонент передает:my-propПередайте данные дочерним компонентам и передайте@child-event Слушайте события, создаваемые дочерними компонентами.проходы дочерних компонентовdefinePropsПолучает содержимое, переданное родительским компонентомmyPropи используйте его в событии нажатия кнопкиemitОтправьте данные в родительский компонент.

Использование Pinia (библиотека управления состоянием для Vue 3)

Преимущества и особенности Пинии

Pinia — это официально рекомендуемая библиотека управления состоянием для Vue 3. Она обеспечивает компонентный способ управления состоянием приложения. Вот некоторые из ключевых преимуществ и особенностей Pinia:

• API компонента: Pinia использует API на основе компонентов, что делает разделение управления состоянием и логики компонентов более естественным.
• Поддержка TypeScript: Пиния с самого начала рассматривала возможность поддержки TypeScript, что обеспечивает лучший вывод типов и поддержку редактора при разработке с использованием TypeScript.
• Модульный: Pinia позволяет разделить состояние на несколько магазинов, и каждый магазин может независимо управлять своим состоянием и логикой.
• Совместимость с композитным API: Pinia прекрасно интегрируется с Composition API Vue 3, что делает разделение управления состоянием и логики компонентов более естественным.
• Отладка путешествий во времени: Pinia предоставляет возможности отладки путешествий во времени, позволяя разработчикам легко возвращаться и проверять изменения состояния.

Как настроить и использовать Pinia

Чтобы начать использовать Pinia, сначала необходимо установить Pinia:

npm install pinia

Или используйте Пряжу:

yarn add pinia

Затем настройте Pinia в своем приложении Vue:

import { createPinia } from 'pinia';
 
const pinia = createPinia();
app.use(pinia);

Создайте магазин:

import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
 
    function increment() {
        count.value++;
    }
 
    return { count, increment };
});

Использовать магазин в компоненте:

<script setup>
import { useCounterStore } from '@/stores/counter';
 
const counterStore = useCounterStore();
</script>
 
<template>
    <div>
        <p>Count: {{ counterStore.count }}</p>
        <button @click="counterStore.increment">Increment</button>
    </div>
</template>

Интеграция Pinia с компонентами

Интеграция Pinia с компонентами очень проста, в основном черезdefineStore функция для создания магазина. В компонентах вы можете напрямую использовать состояние и методы в магазине:

<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
    </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter';
 
 
const counterStore = useCounterStore();
const { count, increment } = storeToRefs(counterStore);
//如果这里不使用storeToRefs会丢失响应式特性
</script>

В приведенном выше примере мы получаем доступ непосредственно в шаблоне.countдля отображения значения счетчика и вызова его в событии нажатия кнопкиincrementМетод увеличения значения счетчика.

Уникальный метод связи Vue 3

Предоставить/ввести

Базовое использование Provide/Inject
В Вью 3,provideиinjectЭто метод связи между родительскими и дочерними компонентами, который позволяет компоненту-предку внедрить зависимость во все его компоненты-потомки, независимо от глубины иерархии компонентов.

• предоставить данные: Использование родительского компонентаprovideФункции предоставляют данные.
• Внедрить данные: используется компонентами-потомкамиinjectФункция вводит данные.

Применимые сценарии для предоставления/внедрения
provideиinjectПрименимо к следующим сценариям:

• Если вы хотите избежать прохождения нескольких слоевpropsпри передаче данных.
• Если вы хотите, чтобы несколько компонентов в дереве компонентов обменивались данными.

Образец кода：

// 祖先组件
export default {
  setup() {
    const message = 'Hello from Ancestor!';
    provide('message', message);
  }
}
 
// 子孙组件
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Телепорт

Концепция и использование Телепорта
TeleportЭто новый встроенный компонент, добавленный в Vue 3, который позволяет «передавать» часть шаблона внутри компонента в любое другое место в DOM.

Как использовать Teleport для связи компонентов
Teleport Он используется не для связи между компонентами, а для управления положением рендеринга компонентов.но ты можешь использоватьTeleportОсобый метод связи достигается путем рендеринга частей компонента в DOM родительского компонента.

Образец кода：

<!-- 父组件 -->
<template>
  <div>
    <Teleport to="body">
      <ChildComponent />
    </Teleport>
  </div>
</template>
 
<!-- 子组件 -->
<template>
  <div>Some content</div>
</template>

API композиции

Введение в API композиции
Vue 3 представляет API композиции, который предоставляет новый способ организации и повторного использования логики.проходитьsetupФункции позволяют разработчикам более гибко контролировать состояние реагирования и жизненный цикл компонентов.

Используйте ref и reactive для межкомпонентного взаимодействия.
refиreactiveЭто инструмент API композиции для создания адаптивных данных.

• refРеактивные ссылки для создания базовых типов данных.
• reactiveРеактивная ссылка для создания типов объектов.

Использование предоставления и внедрения в Composition API
В API композицииprovideиinjectдопустимыйsetupИспользуется в функциях для обеспечения межкомпонентной связи.

Образец кода：

// 祖先组件
import { provide } from 'vue';
 
export default {
  setup() {
    const message = ref('Hello from Ancestor!');
    provide('message', message);
  }
}
 
// 子孙组件
import { inject } from 'vue';
 
export default {
  setup() {
    const message = inject('message');
    return { message };
  }
}

Благодаря этим уникальным методам связи Vue 3 разработчики могут более гибко организовывать связь между компонентами и улучшать удобство сопровождения и возможность повторного использования кода.

Подведем итог

Vue 3 представляет Composition API, который обеспечивает новую гибкость и мощные функции для взаимодействия компонентов. Взаимодействие компонентов является ключом к созданию сложных пользовательских интерфейсов в интерфейсной разработке. Оно включает в себя передачу данных и запуск событий между родительскими и дочерними компонентами, родственными компонентами, а также компонентами-предками и потомками. Vue 3 предоставляет множество методов связи, включая традиционные реквизиты и отправку, а также новый API Provide/Inject, Teleport и Composition.

Рекомендуемая сопутствующая информация

• Официальная документация Vue 3：Vue.js — прогрессивный JavaScript-фреймворк | Vue.js— Официальная документация — самый авторитетный ресурс для изучения Vue 3, включая подробные руководства и справочники по API.
• Учебное пособие по API композиции Vue.js 3：Часто задаваемые вопросы по API композиции | Vue.js- Официальное руководство по API композиции, которое поможет вам быстро приступить к работе.
• Официальная документация Пинии：Pinia | Интуитивно понятный магазин для Vue.js- Если вы планируете использовать Pinia для управления состоянием, официальная документация Pinia станет лучшим учебным ресурсом.
• Представлена ​​технология Vue.js：Предисловие | Представлена ​​технология Vue.js— Это проект, глубоко анализирующий внутренний механизм Vue.js, который помогает понять, как работает Vue.

Творить непросто. Если эта статья вам поможет, можете ли вы поставить мне лайк?