소품

숫자 전달

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

부울 값을 전달하세요

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

배열로 전달

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

객체로 전달

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

객체의 모든 속성을 전달하세요

객체의 모든 속성을 소품으로 전달하려면 다음을 수행하세요. 매개변수 없이 v-bind를 사용하세요(v-bind:prop-name 대체). 예를 들어, 주어진 개체 post에 대해:

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
      }
    }
  }
})

다음 템플릿:

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">

Prop Validation

우리는 당신이 알고 있는 유형과 같은 구성 요소 prop에 대한 유효성 검사 요구 사항을 지정할 수 있습니다. 요구 사항이 충족되지 않으면 Vue는 브라우저 콘솔에서 경고합니다. 이는 다른 사람이 사용할 구성 요소를 개발할 때 특히 유용합니다.

props의 유효성을 검사하는 방법을 사용자 정의하려면 문자열 배열 대신 props의 값에 대한 유효성 검사 요구 사항을 객체에 제공할 수 있습니다. 예: 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>

🎜구성 요소 인스턴스가 생성되기 전에 🎜 해당 prop이 확인되므로 인스턴스의 속성(예: data, computed 등)이 확인됩니다. )이 기본값이거나 유효성 검사기 기능을 사용할 수 없습니다. 🎜

🎜Type check🎜🎜🎜🎜type은 다음과 같은 네이티브일 수 있습니다. 구성 함수 중 하나: 🎜

• 🎜String🎜
• 🎜Number 🎜
• 🎜부울🎜
• 🎜배열🎜
• 🎜객체🎜
• 🎜날짜🎜
• 🎜함수🎜
• 🎜기호< / code>🎜