Как лучше всего организовать связь данных дочерних компонентов и родительского?

Question

[mikhail_fishtank]

Существует два компонента - родительский, описывающий, например, каталог книг и дочерний, описывающий книгу. Нужно вывести книги в каталоге.
Как должны храниться данные книг?
- В родительском компоненте, дочерние компонент отдельных данных не имеют, данные, как часть родительсикх данных, например, какого-то поля booksList.
- В дочерних компонентах, каждый - свой набор данных, ничего в родительском.
- Как-то размазанно между родительским и дочерним.
И как это должно выглядить в коде, чтобы данные оставались связанными?

Answer 1

[MikUrrey]

В родительском компоненте, дочерние компонент отдельных данных не имеют, данные, как часть родительсикх данных, например, какого-то поля booksList.

Скорее в компоненте, родительском для каталога книг, а глубже спускать в виде пропсов.

И как это должно выглядить в коде, чтобы данные оставались связанными?

<template>
  <lib-category v-model="booksList"></lib-category>
</template>
<script>
import libCategory from "./libCategory.vue"
default export {
  //...
  components: {libCategory},
  data() {
    return {
      booksList: [],
    }
  }
  //...
}
</script>

libCategory.vue

<template>
  <div v-for="(category, i) in booksListInner" :key="'i' + i">
     <!-- тут какое-то оформление категории -->
     ...
     <!-- а тут перечисляем книги, в нее входящие -->
     <lib-book v-for="(book, k) in category.children" :key="'k' + k" v-model="book"></lib-book>
  </div>
</template>
<script>
import libBook from "./libBook.vue"
default export {
  //...
  props: ['value'],
  components: {libBook},
  data() {
    return {
      booksListInner: [],
    }
  },
  watch: {
    value: {
      handler (value) { //связанность снаружи внутрь
        this.booksListInner = value
      },
      immediate: true,
      deep: true, //необходимо для объекта с вложенностью
    },
    booksListInner: {
      handler (booksListInner) { //связанность изнутри наружу
        this.$emit("input", booksListInner)
      },
      deep: true, //необходимо для объекта с вложенностью
    }
  }
}
</script>

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