Определение реквизита

Реквизиты — это настраиваемые атрибуты, которые передают данные от родительского компонента к дочернему компоненту. Vue позволяет передавать данные только от родителя к дочернему. Поэтому не обновляйте свойство внутри дочернего компонента.

Что такое родительские и дочерние компоненты

Поясним это на простом примере:

Выполнение

Краткое введение

Vue предоставляет два способа определения и использования свойств. defineProps() и provide-inject. Обычно defineProps() является низкоуровневым методом. provide-inject – это высокоуровневый способ работы с реквизитами. Эти два метода имеют очень разные особенности. Давайте создадим простое приложение, которое отображает различия между defineProps() и Provide-inject.

Убедитесь, что ваша установка Vue работает и позволяет использовать API композиции.

Код

Добавьте следующий код в соответствующие компоненты.

App.vue

Props_vs_Provide.vue

Использование определенияПропс()

Одним из ключевых преимуществ использования defineProps() является то, что он дает вам контроль над реквизитами. Вы можете строго указывать типы значений и значения по умолчанию, а также отслеживать реквизиты.

Давайте определим programmingLangprop.

Затем используйте withDefaults(), чтобы указать значение по умолчанию для programmingLang.

Поскольку мы не предоставили реквизиту programmingLang в App.vue значение, значение по умолчанию Typescript должен отображаться на кнопке. Давайте воспользуемся v-моделью, чтобы предоставить programmingLang динамическое значение.

В App.vue

Теперь мы должны иметь возможность динамически предоставлять наш любимый язык программирования. Из приведенной выше практики опора;

  • Имеет тип string.
  • Используется ли необязательное значение key?: type
  • Имеет значение по умолчанию Typescript.
  • Можно легко отследить. родительский компонент — App.vue. дочерний компонент – это Props_vs_Provide.vue.

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

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

Давайте определим myIDEprop.

В Props_vs_Provide

По сравнению с defineProps() нам нужно всего несколько строк кода в provide-inject. Более того, provide-inject очень полезен при работе с длинной цепочкой компонентов. Однако:

  • Вы не можете эффективно отслеживать реквизит. Чтобы противостоять этому, вы можете добавить комментарий, чтобы указать родительский или дочерний компонент.
  • Вы не можете явно определить тип значения для реквизита. Vue предоставляет такие механизмы, как:
  • inject(prop, defaultValue) будет работать, даже если нет предоставленной поддержки с помощью provide(). Это может привести к некоторым трудно отслеживаемым ошибкам.
  • Вы не можете указать значение по умолчанию. inject() предоставляет значение по умолчанию, которое работает, только если нет предоставленного реквизита с использованием provide().

Заключение

В заключение, чтобы передать свойство вашим компонентам независимо от родительского или дочернего компонента, используйте provide-inject. Но если ваша цель состоит в том, чтобы иметь как можно больше контроля над реквизитом, используйте defineProps()

Надеюсь, вам понравилась статья. Пожалуйста, аплодируйте, подпишитесь и оставьте любые комментарии.