Vue Prop属性功能与用法实例详解

当我们需要将数据从父组件传递到子组件时，可以使用 Vue 中的 Prop 属性来实现。本文将详细讲解 Vue Prop 属性的功能和用法，并提供两个示例说明。

Prop 属性的基本概念

Prop 属性的作用

Prop 属性用于将数据从父组件传递到子组件，实现组件之间的数据通信。

Prop 属性的传值方式

父组件通过向子组件传递属性 props ，子组件通过 props 接收属性值。

Prop 属性值的类型

Prop 属性值接收的类型可以是字符串、数字、布尔值等基本数据类型，也可以是对象、数组等复杂数据类型。

Prop 属性的传递校验

可以通过设置 Prop 的类型、必要性、默认值等属性，来校验 Prop 属性的传递状态，提高代码的健壮性。

Prop 属性用法实例

示例一：传递字符串类型的 Prop 属性值

<!-- 父组件模板 -->
<template>
  <div>
    <my-component message="hello world"></my-component>
  </div>
</template>

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

  export default {
    components: {
      MyComponent
    }
  }
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String
      }
    }
  }
</script>

上述代码中，父组件向子组件传递了一个字符串类型的 Prop 属性值 message ，子组件通过 props 接收该属性值，并将该值渲染到组件模板中。

示例二：传递数组类型的 Prop 属性值

<!-- 父组件模板 -->
<template>
  <div>
    <my-component :items="['item1', 'item2', 'item3']"></my-component>
  </div>
</template>

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

  export default {
    components: {
      MyComponent
    }
  }
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

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

上述代码中，父组件向子组件传递了一个数组类型的 Prop 属性值 items ，子组件通过 props 接收该属性值，并将该数组渲染为一个无序列表。

同时，在子组件中设置了 required: true ，表示该属性为必传属性，父组件如果未传递该属性值，则会在控制台报错。

以上两个示例展示了 Vue Prop 属性的基本用法和传值方式，可以帮助开发者更好地理解和使用 Prop 属性。