Как в Vue передать переменные из одного компонента в другой компонент?

Question

[YakovSpb]

Как мне второй цикл вынести в отдельный компонен?

var Board = {
	template: `
   <main class="flexbox" >
        <div 
        class="board"
        :id="b.id"
        v-for="b in boards"
        :key="b.id"
        >
        <div class="board__title">{{b.title}}</div>
          <div v-for="n in tasksGroupedByCategory[b.name].tasks">
                 <div 
                    :id="'card-'+ n.id"
                    draggable="true"
                    class="card">
                    <p>{{n.title}}</p>
                 </div>
          </div>
        <div class="board__btn"><span><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z" fill="#626262"></path></svg></span> 
          Добавить еще одну карточку
        </div>
      </div>
    </div>
  </main>
	`,
		data() {
			return {
        boards: [
        {id:'board-1', name:'work', title:'В работе'},
        {id:'board-2', name:'test', title:'На проверке'},
        {id:'board-3', name:'done', title:'Выполнено'}
        ],
         tasks: [
            { id: '', category: 'work', title: '', desc: '' },
            { id: '', category: 'test', title: '', desc: '' },
            { id: '', category: 'done', title: '', desc: '' },
          ]
			}
      },
      created () {
        fetch('../tasks.json')
        .then(res => res.json())
        .then(tasks =>{
          this.tasks = tasks
        })
      },
      computed: {
        tasksGroupedByCategory() {
          return this.tasks.reduce((acc, n) => {
            const c = n.category;
            (acc[c] = acc[c] || { category: c, tasks: [] }).tasks.push(n);
            return acc;
          }, {});
        },
      }
    }

Answer 1

[Арсений Матыцин]

Пропсы, общая шина, vuex. Выбирай и читай документацию.