从一个组件到另一个Vuejs访问数组元素

<template>
  <div>
    <child-component :arrayProp="myArray"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myArray: [1, 2, 3, 4, 5]
    };
  }
};
</script>

<template>
  <div>
    <p v-for="item in arrayProp" :key="item">{{ item }}</p>
  </div>
</template>

<script>
export default {
  props: ['arrayProp']
};
</script>

<template>
  <div>
    <child-component @selectItem="handleSelect"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleSelect(item) {
      console.log(item);
    }
  }
};
</script>

<template>
  <div>
    <p v-for="item in array" :key="item" @click="selectItem(item)">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [1, 2, 3, 4, 5]
    };
  },
  methods: {
    selectItem(item) {
      this.$emit('selectItem', item);
    }
  }
};
</script>