2

У меня есть структура компонентов

<cb-result>
    <result-content>
        <cb-result__data></cb-result__data>
    </result-content>
    <next-button></next-button>
</cb-result>

Тело cb-result__data:

<p class="cb-result__data"> \
    <span>{{ title }}:</span> \
    <strong>{{ description }}</strong> \
</p>

Как мне из корневого экземпляра передать свойство в cb-result__data чтобы значение свойства отображалось в {{ description }}?

1 ответ 1

4

С помощью props:

https://ru.vuejs.org/v2/guide/components.html#Передача-данных-через-входные-параметры

<cb-result>
    <result-content>
        <cb-result__data testString="Hello, world!"></cb-result__data>
    </result-content>
    <next-button></next-button>
</cb-result>

И объявляете свойство в самом компоненте

props: ['testString']

Далее, вы можете взаимодействовать с свойствами, как с обычными данными компонента

<div> Родитель говорит: {{testString}} </div>

Также, следует почитать про sync https://ru.vuejs.org/v2/guide/components.html#Модификатор-sync

и глобальную шину данных

https://ru.vuejs.org/v2/guide/components.html#Коммуникация-между-компонентами-не-связанными-иерархически

Для более сложных приложений вы можете изучить vuex (только после освоения всех базовых вещей в библиотеке)

https://ru.vuejs.org/v2/guide/state-management.html

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.