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

Реквизиты — лучший и эффективный способ отправки переменных между компонентами, но реквизиты отправляются только от родителя к дочернему элементу. Это означает, что вы можете отправлять реквизиты только тогда, когда вы вызываете свой компонент (родительский) вашему компоненту (дочернему). Таким образом, вы не можете отправлять реквизиты от ребенка к родителю. Но, конечно, есть способ сделать это. Мы называем это Emitting, но я сказал, что мы не говорим об Emitting в этой статье.

Как вы увидите ниже, я нахожусь на странице с именем forgot.vueи здесь я вызываю nx-textcomponent в теге nuxt-link. Я использую Nuxt.js в этом проекте, но вам не нужен Nuxt.js для передачи свойств. Тег nuxt-link принадлежит Nuxt.js. Не влияет на наш компонент.

Мой компонент nx-text выглядит следующим образом;

Как вы увидите выше, я определяю текстовый объект в объекте реквизита. Мы описываем тип text prop, говоря type. Нам нужно ввести значение по умолчанию, чтобы не возникло проблем в ситуации, когда от родителя не исходит никакого значения.

Нет: если вы не хотите вводить значение по умолчанию, вы можете указать обязательно или необязательно. Это означает, что если родитель не отправит текстовую поддержку дочернему элементу, ваш код выдаст ошибку в консоли. (Если вы введете «required: false», ваш код снова выдаст ошибку, потому что в этом случае ваш код не имеет значения по умолчанию. Это не рекомендуется.)

Вы можете использовать переменную из реквизита, как вы используете переменную из функции данных;

На родительской стороне все проще:

Мы вводим " text="String Value", как будто пишем html-параметр там, где мы вызываем компонент. Если вы отправляете переменную из функции данных , логическое значение или числовое значение, вам нужно ввести вот так;

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