vue父组件向子组件传递多个数据的实例

下面是详细的讲解“Vue父子组件之间传递多个数据”的攻略。

1. 父组件向子组件传递多个数据的方式

在Vue中，父组件向子组件传递数据有以下几种方式：

1.1 父组件通过属性props向子组件传递数据

这是最常见的一种方式。在父组件中声明props，在子组件中通过props定义需要接收的数据，然后就可以通过props传递数据。

父组件中的代码示例：

<template>
  <div>
    <child-component :prop1="data1" :prop2="data2" :prop3="data3" />
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        data1: 'hello',
        data2: 'world',
        data3: '!'
      }
    }
  }
</script>

子组件中的代码示例：

<template>
  <div>
    <p>{{ prop1 }}{{ prop2 }}{{ prop3 }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      prop1: {
        type: String,
        required: true
      },
      prop2: {
        type: String,
        required: true
      },
      prop3: {
        type: String,
        required: true
      }
    }
  }
</script>

1.2 使用v-bind指令简化父组件中的代码

父组件中也可以使用v-bind指令简化代码，v-bind指令可以缩写为": "。

<template>
  <div>
    <child-component :prop1="data1" :prop2="data2" :prop3="data3" />
  </div>
</template>

可以简写为：

<template>
  <div>
    <child-component :prop1="data1" :prop2="data2" :prop3="data3" />
  </div>
</template>

2. 示例说明

下面是两个示例说明。

2.1 第一个示例：

在这个示例中，我们在父组件中定义了三个数据data1、data2、data3，然后将这三个数据通过props传递给子组件，在子组件中展示这三个数据。

父组件中的代码：

<template>
  <div>
    {/* 使用v-bind指令简化代码 */}
    <child-component :prop1="data1" :prop2="data2" :prop3="data3" />
  </div>
</template>


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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        data1: 'hello',
        data2: 'world',
        data3: '!'
      }
    }
  }
</script>

子组件中的代码：

<template>
  <div>
    {/* 在子组件中展示父组件通过props传递过来的数据 */}
    <p>{{ prop1 }}{{ prop2 }}{{ prop3 }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      prop1: {
        type: String,
        required: true
      },
      prop2: {
        type: String,
        required: true
      },
      prop3: {
        type: String,
        required: true
      }
    }
  }
</script>

2.2 第二个示例：

这个示例中，我们定义一个数组，然后在父组件中使用v-for指令循环展示数据，并将数据通过组件实例参数传递给子组件。

父组件中的代码：

<template>
  <div>
    <child-component v-for="(item, index) in list" :key="index" :item="item" />
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        list: [
          { name: '张三', age: 18 },
          { name: '李四', age: 20 },
          { name: '王五', age: 22 }
        ]
      }
    }
  }
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ item.name }} : {{ item.age }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      item: {
        type: Object,
        required: true
      }
    }
  }
</script>