Vue. Как дочернего компонента вызвать пропсы родительского?

Question

[xeywar]

Есть родительский компонент который может принимать <slot />, и некоторые пропсы
Как в <slot /> (детей), использовать методы (или пропсы) родительского компонента? Если это в Vue можно реализовать как-то и является правильным подходом вообще.

Я пишу на реакте, там можно переопределить children:

children = React.Children.toArray(children).map(child=> {
      return React.cloneElement(child, {
          active,
          _onChange: (value, label)=> onChange(value, label),
          ...child.props
      });
    });

Есть ли что-то похожие в Vue, либо я куда-то не туда копаю? Может в Vue вообще данный подход не уместен и есть другой способ использовать какие-то "общие" пропсы?

Comments

[Модератор]

xeywar дорогой пользователь, настоятельно рекомендуем еще раз обратить самое пристальное внимание на п. 3.1 регламента работы сервиса (и, в особенности, на его последний абзац).
В противном случае ваши вопросы будут удаляться по причине тег-спама, а систематические нарушения приведут к блокировке учетной записи.

Answer 1

[Алексей Ярков]

Достучаться до родителя можно через this.$parent.
Но я бы по рукам палкой за это бил.

Comments

[xeywar]

Мне нужно это в компоненте, шаблон такой:

<l-menu
    :active="active"
    onChange="v=> active = v"
>
    <l-menu-item value="home">Home</l-menu-item>
    <l-menu-item value="about">About</l-menu-item>
    <l-menu-item value="contact">Contact</l-menu-item>
<l-menu>

Собственно я даю метод onChange родителю, и при клике на item мне нужно вызывать этот метод и передавать value. Это очень удобно на самом деле, т.к. если меню большое не нужно в каждому чилдрену писать будет свой метод, и в реакте это по сути норма, если в Vue так не делают хотелось бы узнать какие best practics есть

[Александр Маджугин]

xeywar, item пусть меняет значение в родители через v-model, а в родителе пусть будет слушатель, но вообще и это плохо.

На самом деле метод должен быть в l-menu-item и не нужно писать его в каждом чилдрене - его нужно писать только в одном:

<l-menu
    :active="active"
    :items="items"
>
    <l-menu-item v-for="item in items" v-bind:key="item.id" v-bind:value="item.val">{{item.title}}</l-menu-item>
<l-menu>