组件用.vue还是.js_Vue.js组件道具

最新推荐文章于 2024-09-21 17:56:48 发布

cuk0051

最新推荐文章于 2024-09-21 17:56:48 发布

阅读量101

点赞数

文章标签： vue python java javascript react ViewUI

原文链接：https://flaviocopes.com/vue-props/

版权

组件用.vue还是.js

在组件内部定义道具 (Define a prop inside the component)

Props are the way components can accept data from components that include them (parent components).

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

When a component expects one or more prop, it must define them in its props property:

当组件需要一个或多个道具时，必须在其props属性中定义它们：

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

or, in a Vue Single File Component:

或者，在Vue单个文件组件中：

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

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

接受多个道具 (Accept multiple props)

You can have multiple props by appending them to the array:

您可以通过将多个道具附加到数组来拥有多个道具：

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

设置道具类型 (Set the prop type)

You can specify the type of a prop by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

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

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

The valid types you can use are:

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

String
串
Number
数
Boolean
布尔型
Array
数组
Object
目的
Date
日期
Function
功能
Symbol
符号

When a type mismatches, Vue alerts (in development mode) in the console with a warning.

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

Prop types can be more articulated.

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

You can allow multiple different value types:

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

props: {
  firstName: [String, Number]
}

将道具设置为强制性 (Set a prop to be mandatory)

You can require a prop to be mandatory:

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

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

设置道具的默认值 (Set the default value of a prop)

You can specify a default value:

您可以指定一个默认值：

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

For objects:

对于对象：

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

default can also be a function that returns an appropriate value, rather than being the actual value.

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

You can even build a custom validator, which is cool for complex data:

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

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

将道具传递到组件 (Passing props to the component)

You pass a prop to a component using the syntax

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

<ComponentName color="white" />

if what you pass is a static value.

如果您传递的是静态值。

If it’s a data property, you use

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

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

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

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

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

<script>
...
export default {
  //...
  data: function() {
    return {
      color: 'white'
    }
  },
  //...
}
</script>