Vue中props的使用详解

什么是props

在Vue中，每个组件都可以接受一些参数，这些参数被称为props。props是一个数组，在组件定义中声明。你可以使用props从父组件中传递数据到子组件中。

如何使用props

在组件定义中声明props属性，用于接收父组件中传递的数据。在组件使用中，使用v-bind指令将需要传递给子组件的数据，绑定到组件的对应props属性中。

<!-- 父组件模板 -->
<template>
  <div>
    <child-component :msg="message"></child-component>
  </div>
</template>

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

export default {
  components: {
    childComponent
  },
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

上面的代码中，父组件通过v-bind指令将message数据绑定到子组件的msg属性中。在子组件中，通过props属性声明了需要接受一个字符串类型的msg属性。

props的类型声明和默认值

props在声明时，可以指定props的类型及默认值。对于props类型的声明，Vue提供了一系列内置的类型选项：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

如果需要声明props的默认值，只需要在props属性中添加一个default属性。

<!-- 子组件模板 -->
<template>
  <div>
    <h1>{{ msg }}</h1>
    <h2>{{ count }}</h2>
    <h3>{{ isEnabled }}</h3>
  </div>
</template>

<script>
export default {
  props: {
    msg: String,
    count: {
      type: Number,
      default: 1
    },
    isEnabled: {
      type: Boolean,
      default: true
    }
  }
}
</script>

在上面的代码中，msg的类型为String，count的类型为Number，defaultValue为1，isEnabled的类型为Boolean，defaultValue为true。

props的验证

Vue还提供了一种验证props的方式，使用validator属性可以自定义props的验证规则。

<!-- 子组件模板 -->
<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String,
      validator: function(value) {
        return value.length >= 3
      }
    }
  }
}
</script>

在上面的代码中，msg的类型为字符串类型，并且需要满足长度大于等于3的验证规则。

示例1：父组件向子组件传递对象类型的props

<!-- 父组件模板 -->
<template>
  <div>
    <child-component :user="userInfo"></child-component>
  </div>
</template>

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

export default {
  components: {
    childComponent
  },
  data() {
    return {
      userInfo: {
        name: 'Jack',
        age: 18,
        gender: 'male'
      }
    }
  }
}
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <h2>{{ user.age }}</h2>
    <h3>{{ user.gender }}</h3>
  </div>
</template>

<script>
export default {
  props: {
    user: Object
  }
}
</script>

在上面的代码中，父组件通过v-bind指令将userInfo数据绑定到子组件的user属性中。在子组件中，通过props属性声明了需要接受一个对象类型的user属性。

示例2：父组件向子组件传递函数类型的props

<!-- 父组件模板 -->
<template>
  <div>
    <child-component :handler="handleClick"></child-component>
  </div>
</template>

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

export default {
  components: {
    childComponent
  },
  methods: {
    handleClick() {
      alert('Hello World!')
    }
  }
}
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <button @click="handleClick">Click me!</button>
  </div>
</template>

<script>
export default {
  props: {
    handler: Function
  },
  methods: {
    handleClick() {
      this.handler()
    }
  }
}
</script>

在上面的代码中，父组件通过v-bind指令将handleClick方法绑定到子组件的handler属性中。在子组件中，通过props属性声明了需要接受一个函数类型的handler属性，并且在子组件内部使用该属性来触发父组件的方法。