Soutenir

Passez un numéro

<blog-post v-bind="post"></blog-post>

Passez une valeur booléenne

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

Passer dans un tableau

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

Passer un objet

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Transmettre tous les attributs d'un objet

Si vous souhaitez transmettre tous les attributs d'un objet comme accessoires, vous pouvez Utilisez v-bind sans paramètres (en remplaçant v-bind:prop-name). Par exemple, pour un objet post donné :

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

le modèle suivant :

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>

<input type="date" class="form-control">

Validation des accessoires

Nous pouvons spécifier les exigences de validation pour les accessoires de composants, tels que les types que vous connaissez. Si une condition n'est pas remplie, Vue vous avertira dans la console du navigateur. Ceci est particulièrement utile lors du développement d’un composant qui sera utilisé par d’autres.

Pour personnaliser la façon dont les accessoires sont validés, vous pouvez fournir un objet avec des exigences de validation pour la valeur dans props au lieu d'un tableau de chaînes. Par exemple : props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：

<bootstrap-date-input
  data-date-picker="activated"
  class="date-picker-theme-dark"
></bootstrap-date-input>

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。

类型检查

type 可以是下列原生构造函数中的一个：

• String

• Number

• Boolean

• Array

• Object

• Date

• Function

• Symbol

额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：

Vue.component('my-component', {
  inheritAttrs: false,
  // ...
})

你可以使用：

{
  required: true,
  placeholder: 'Enter your username'
}

来验证 author prop 的值是否是通过 new Person 创建的。

非 Prop 的特性

一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。

因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。

例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件，这个插件需要在其 <input> 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上：

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"
      >
    </label>
  `
})

然后这个 data-date-picker="activated" 特性就会自动添加到 <bootstrap-date-input> 的根元素上。

替换/合并已有的特性

想象一下 <bootstrap-date-input>

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

🎜Notez que ces accessoires seront vérifiés 🎜 avant la création d'une instance de composant 🎜, donc les propriétés de l'instance (telles que data, calculed, etc. ) sont en default ou les fonctions validator ne sont pas disponibles. 🎜

🎜Type check🎜🎜🎜🎜type peut être le natif suivant construit Une des fonctions : 🎜

• 🎜String🎜
• 🎜Number 🎜
• 🎜Booléen🎜
• 🎜Array🎜
• 🎜Objet🎜
• 🎜Date🎜
• 🎜Fonction🎜
• 🎜Symbole< / code>🎜