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 支持