Vue.js组件道具

道具用于将状态传递给子组件。了解所有关于他们的信息

在组件内部定义道具

道具是组件可以从包含它们的组件(父组件)接受数据的方式。

当组件需要一个或多个道具时,必须在其中定义它们props财产:

Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

或者,在Vue单个文件组件中:

<template>
  <p>{{ name }}</p>
</template>

<script> export default { props: [‘name’] } </script>

接受多个道具

您可以通过将多个props附加到数组来拥有多个props:

Vue.component('user-name', {
  props: ['firstName', 'lastName'],
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

设置道具类型

您可以通过使用对象而不是数组,将属性名称用作每个属性的键,并使用类型作为值来指定道具的类型:

Vue.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'
})

您可以使用的有效类型是:

  • 细绳
  • 数字
  • 布尔型
  • 大批
  • 目的
  • 日期
  • 功能
  • 象征

当类型不匹配时,Vue在控制台中以警告方式警告(处于开发模式)。

道具类型可以更清晰地表达。

您可以允许多种不同的值类型:

props: {
  firstName: [String, Number]
}

将道具设置为强制性

您可以要求道具是强制性的:

props: {
  firstName: {
    type: String,
    required: true
  }
}

设置道具的默认值

您可以指定一个默认值:

props: {
  firstName: {
    type: String,
    default: 'Unknown person'
  }
}

对于对象:

props: {
  name: {
    type: Object,
    default: {
      firstName: 'Unknown',
      lastName: ''
    }
  }
}

default也可以是返回适当值的函数,而不是实际值。

您甚至可以构建一个自定义验证器,该验证器对复杂数据很酷:

props: {
  name: {
    validator: name => {
      return name === 'Flavio' //only allow "Flavios"
    }
  }
}

将道具传递到组件

您使用以下语法将prop传递给组件

<ComponentName color="white" />

如果您传递的是静态值。

如果它是数据属性,则使用

<template>
  <ComponentName :color=color />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

您可以在prop值内使用三元运算符来检查真实条件并传递依赖于该条件的值:

<template>
  <ComponentName :colored="color == 'white' ? true : false" />
</template>

<script> … export default { //… data: function() { return { color: ‘white’ } }, //… } </script>

免费下载我的Vue手册


更多vue教程: