Vue - привязка массива от дочернего к родительскому компоненту

Question

Я несколько раз сталкивался с таким же сценарием и удивляюсь, чего мне не хватает.

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

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

Вторым плохим решением было бы инициировать список внутри родителя и передать его ребенку в качестве реквизита, что также плохо, так как я хочу отделить ведение списка от родителя для абстракции.

Лучшее решение, которое я мог бы придумать, - это обработать список в дочернем компоненте и при любом изменении передать событие изменения родительскому элементу со ссылкой на список (идентично тому же, что и событие изменения поля ввода), но Я не уверен, что это самый идеальный способ.

Есть идеи, как решить проблему? Звучит как очень распространенное явление, хотя я не смог найти хорошего решения онлайн.

edit: просто прочитайте о модификаторе синхронизации, который звучит довольно близко к тому, что я ищу. Интересно, будет ли это хорошим вариантом использования?

Answer 1

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

<child-component #getChild></child-component>
<div>{{getChild.message}}</div>
<button (click)="getChild.childMethod()">Call child method</button>

В дочернем компоненте:

childMethod() {
  this.message = 'child value';
}