45.Vue.js official website study notes (prop)

1.prop capitalization

In HTML attribute names are not case sensitive, so when using the template in the DOM, you need to prop name (firstName) nomenclature of the hump into a dash name (first-name):

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>

Note: If you use a template string `` ... This limitation does not exist

2.prop type

If the value of each prop has a designated type may be listed as objects prop:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

3. pass static or dynamic prop

To prop traditional values ​​can be static or dynamic:

<!--静态的值-->
<blog-post title="My journey with Vue"></blog-post>

<!--动态的值-->
<blog-post v-bind:title="post.title"></blog-post>

On top of these two examples, the incoming string type values ​​are, in fact, any type of value can be passed to prop

(1) pass a digital

<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:likes="42"></blog-post>

(2) pass a Boolean value

<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。-->
<blog-post is-published></blog-post>

<!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:is-published="false"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

(3) pass an array

<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

(4) passing an object

<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>

<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>

(5) passed all the properties of an object

To all the properties of an object are passed as a prop, you may be used without parameters v-bind substituted v-bind: prop-name:

Given an object: post: {id: 1, title: 'My Journey with Vue'}, this can be transmitted:

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

Equivalent to:

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

4. way data flow

All prop prop father and son are formed between such a unidirectional downlink binding: prop parent will flow down to update subassembly, but not vice versa.

Each time the parent component is updated, all prop subassemblies are refreshed to the latest value, which means you should not be in a child's internal components to change the value prop.

There are two common case of trying to change the prop:

(1) This is used to pass a prop initial value, the next sub-assembly is desirable to use it as a local prop

In this case, it is preferable to define a local data property, and the prop as its initial value:

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

(2) passing the prop with a primitive value and need to be converted

In this case, it is preferable to use this value to define a prop calculated properties:

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

5.prop verification

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

Note: Those prop will be verified before a component instance is created, so the instances of property