vue.js props详解

在 Vue.js 中，props 是一种用于父组件向子组件传递数据的机制。通过在子组件中声明 props，我们可以指定父组件传递给子组件的数据的类型、默认值等属性。

在子组件中声明 props：

Vue.component('child-component', {
  props: {
    propA: {
      type: String, // 数据类型为字符串
      required: true // propA 是必传的
    },
    propB: {
      type: Number, // 数据类型为数字
      default: 100 // propB 的默认值为 100
    },
    propC: {
      type: Object, // 数据类型为对象
      default: function () {
        return { message: 'hello' } // propC 的默认值为 { message: 'hello' }
      }
    }
  },
  template: '<div>{{ propA }} {{ propB }} {{ propC.message }}</div>'
})

在父组件中传递数据给子组件：

<child-component propA="hello" :propB="200" :propC="{ message: 'world' }"></child-component>

子组件会根据父组件传递的数据进行渲染：

<div>hello 200 world</div>

props 支持以下属性：

• type：指定 prop 的数据类型，可以是字符串、数字、布尔值、数组、对象、函数等。
• default：指定 prop 的默认值，在父组件没有传递该 prop 时会使用默认值。
• required：指定 prop 是否必传，如果没有传递该 prop，则会在控制台打印警告信息。
• validator：指定一个自定义验证函数，用于验证 prop 的值是否符合要求。

在子组件中可以通过 this.propName 来访问父组件传递的 prop 数据。

除了声明 props，我们还可以使用 v-bind 指令来动态绑定 prop 数据。例如：

<child-component v-bind:propA="parentData"></child-component>

这里的 parentData 是父组件中的一个数据，通过 v-bind 将其动态绑定到子组件的 propA 上。

总结：

• props 是一种用于父组件向子组件传递数据的机制。
• 子组件中通过声明 props 来定义接收数据的属性。
• 父组件可以通过属性绑定的方式将数据传递给子组件。
• 子组件可以通过 this.propName 来访问父组件传递的 prop 数据。
• props 支持类型、默认值、必传和自定义验证等属性。