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

Question

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

теги с данными

 <template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    };
  },
  props: ["sections"]
};
</script>

Answer 1

Вы не можете использовать одно и то же слово / имя свойства (разделы в вашем случае) для данных и реквизита.

Answer 2

Я предполагаю, что ваш код является родительским компонентом:

// parent.vue
<template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
    <my-child-component :sections="sections" />
  </div>
</template>

<script>
import MyChildComponent from '~/components/MyChildComponent.vue'

export default {
  name: "HelloWorld",
  components: {
    MyChildComponent
  },
  data() {
    return {
      sections: [
        {
          name: "scoop",
          type: "boulder"
        },
        {
          name: "pew pew",
          type: "roped"
        }
      ]
    }
  },
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in function
    }
  }
}
</script>

// MyChildComponent.vue
<template>
  <div class="hello">
    <div v-for="(section, index) in sections" :key="index">
      <p>{{section.name}}</p>
      <p>{{section.type}}</p>
    </div>
  </div>
</template>

<script>

export default {
  name: "ChildHelloWorld",
  props: ['sections'],
  methods: {
    consoleSections() {
      console.log(this.sections) // the way to use data in child
    }
  }
}
</script>

Посмотрите в руководстве vue о компоненте: https://vuejs.org/v2/guide/components.html