Vue.js 中如何传递参数表给子组件

在 Vue.js 中，可以通过 props 属性将参数表传递给子组件。在父组件中，定义好要传递的参数表，然后在使用子组件时，以属性的形式绑定参数表，子组件通过 props 接收参数表。

例如，父组件需要将一个包含用户信息的数组传递给子组件：

<template>
  <div>
    <UserListComponent :userList='userList' />
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        { id: 1, name: '张三' },
        { id: 2, name: '李四' }
      ]
    }
  }
}
</script>

子组件接收参数表并显示用户信息：

<template>
  <ul>
    <li v-for='(user, index) in userList' :key='index'>
      {{ user.name }}
    </li>
  </ul>
</template>

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

在这个例子中，父组件通过 :userList='userList' 将 userList 数组绑定到子组件的 userList prop 上。子组件通过 props: ['userList'] 声明接收 userList prop，并使用 v-for 循环遍历 userList 数组，显示每个用户的姓名。

通过 props 属性，你可以灵活地传递各种类型的参数表，例如：

• 数组
• 对象
• 字符串
• 数字
• 布尔值

这使得你在开发复杂组件时可以方便地复用组件，并根据不同的需求传递不同的参数表。