父组件将列表数据通过点击事件传递给子组件去展示当前点击项

要实现循环的数据结构中，当其中一项被点击时将数据传递给子组件，可以使用Vue的事件机制来实现。以下是一个示例代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" @click="handleItemClick(item)">
        {{ item.name }}
      </li>
    </ul>
    <ChildComponent :selectedItem="selectedItem"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ],
      selectedItem: null
    }
  },
  methods: {
    handleItemClick(item) {
      this.selectedItem = item
    }
  }
}
</script>

在上面的代码中，首先在模板中使用v-for指令循环渲染数据结构中的每一项，并使用@click事件修饰符绑定点击事件handleItemClick。当点击某一项时，会调用handleItemClick方法，并将对应的item作为参数传递。然后，在handleItemClick方法中，将点击的item赋值给selectedItem属性。这样，selectedItem属性就会更新为被点击的项。最后，在子组件ChildComponent中，可以使用props属性来接收父组件传递的selectedItem属性，并在子组件中使用。需要注意的是，子组件需要在父组件中进行引入和注册，以便在父组件中使用。可以使用Vue.component方法来注册子组件。例如：

Vue.component('child-component', {
  props: ['selectedItem'],
  template: `
    <div>
      <p>Selected Item: {{ selectedItem.name }}</p>
    </div>
  `
})

在上面的代码中，注册了名为child-component的子组件，并在props属性中定义了接收的属性selectedItem。在子组件的模板中，可以使用selectedItem属性来访问父组件传递的数据。

这样，当点击循环的数据结构中的某一项时，会将对应的数据传递给子组件，并在子组件中显示。