Vue 父组件向子组件传 List 数据方法详解

在 Vue 父页面中，可以通过 props 属性将 list 传递给 Detail 子组件。子组件可以通过在 script 标签中的 props 选项中声明来接收父组件传递的 list。

父组件传递 list 给子组件的示例：

<template>
  <div>
    <Detail :list='list' />
  </div>
</template>

<script>
import Detail from './Detail.vue';

export default {
  components: {
    Detail
  },
  data() {
    return {
      list: ['item1', 'item2', 'item3']
    };
  }
};
</script>

在子组件 Detail 中，可以通过 props 选项声明接收父组件传递的 list，并在子组件中使用。

<template>
  <div>
    <ul>
      <li v-for='item in list' :key='item'>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  }
};
</script>

通过上述示例，Detail 子组件可以在 script 标签中通过 props 选项声明接收父组件传递的 list，并在模板中使用 v-for 指令遍历 list 数据。