Как влиять на props дочернего компонента из родителя?

Question

[Андрей Александрович]

Здравствуйте.

У меня есть два компонента, объявленные глобально:
Первый: выбор страны

<f-select
        :options="countries"
        name="country"
        placeholder="Выберите страну"
        @change-option="getOption"
/>

Второй: выбор города

<f-select
        disabled
        :options="cities"
        name="city"
        placeholder="Выберите город"
        @change-option="getOption"
        @status="compStatus"
/>

У второго есть props "disabled".

Как управлять вторым компонентом в зависимости от выбранного значения в первом?
Как сделать, например, если в первом компоненте выбираю какую-нибудь страну, а во втором компоненте props disabled становится false?

Answer 1

[mShpakov]

Через $emit из первого селекта выбрасывать некоторое значение и передавать его во второй. Способ передачи и что передавать - дело ваше. По сути единственный способ передать значение "на верх" это $emit

Answer 2

[0xD34F]

Реализуем поддержку директивы v-model компонентом f-select - он должен принимать параметр value, который будет определять значение элемента <select> внутри компонента, а при выборе пользователем какого-то пункта выбранное значение должно отправляться родителю:

<select
  :value="value"
  @input="$emit('input', $event.target.value)"
  ...

Добавим в родительский компонент свойство country, и свяжем его c экземпляром компонента, который ответственен за выбор страны:

<f-select
  v-model="country"
  ...

Теперь для экземпляра компонента, ответственного за выбор города, можно значение параметра disabled поставить в зависимость от выбора страны:

<f-select
  :disabled="!country"
  ...

jsfiddle.net/4ugta2v5

Comments

[Андрей Александрович]

Да, спасибо большое!

Можете пояснить, пожалуйста, что значит два восклицательных знака? Впервые такое встречаю)
:active="!!country"

[0xD34F]

Это приведение значения к его true/false эквиваленту.

Но вообще, ерунду какую-то сделал, не надо тут такого. Ответ переписал.