Как передать данные во вложенные дочерние компоненты vue js? - PullRequest
Новая
       11

Как передать данные во вложенные дочерние компоненты vue js?

0 голосов
/ 03 июня 2018

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

<template>
<div>
      <div v-for="stuff in content" v-bind:key="stuff.id">
        <ul>
          <li>
            {{ stuff.items }}
          </li>
        </ul>
      </div>
</div>
</template>

<script>
export default {
  name: stuff,
  props: ['content'],
  data () {
    return {

    }
  }
}
</script>

, а затем привязать данные к компоненту в родительском компоненте, например, 

<template>
  <div>
    <stuff v-bind:content="stuffToPass"></stuff>
  </div>
</template>
<script>
import stuff from './stuff.vue';
export default {
  data () {
    return {
      stuffToPass: [
        {id: 1, items: 'foo'},
        {id: 2, items: 'bar'},
        {id: 3, items: 'baz'}
      ]
    }
  },
  components: {
    stuff
  }
}
</script>

Но, скажем, у меня есть корневой компонент, и я хочу передать данные компоненту вещи, как показано выше, но когда у меня есть ряд других компонентов, таких как parent> x> y> stuff ,и это все еще компонент материала, который в конечном итоге будет получать эти данные, я не знаю, как это сделать.

Я слышал о предоставлении / инъекции, но я не уверен, что это правильное использование, или, по крайней мере, я не смог заставить его работать.

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

...