[Vue] Prop

prop命名

• Vue.component('myInput', ...) 等同於 Vue.component('my-input', ...)

prop類型

• 預設寫法

 props: ['value']

• 型別指定寫法

    props: {

        value: any,

        prefix: String,

        ...

    }

prop特性

• 沒給值預設值為true

<my-input type="text" v-model="title" show-prefix>

Vue.component('myInput', {

    props: {

        value: String,

        prefix: String,

        showPrefix: Boolean

    },

...

單向資料流

• 父組件的props更新後 => 更新子元件的props
• 子組件的props更新不會 => 更新父組件的props
• 不應該在子組件中變更props
• 若props的型別為Object或Array，子組件變更時，會影響到父組件

prop驗證

• 無驗證

props: {

    value: [String, Number]

}

• 加入驗證

props: {

    value: {

        type: [String, Number],

        required: true, // 必填

        default: 'success', // 預設值

        // 自定義驗證

        validator: function (value) {

        // 這個值必須匹配下列字符串中的一個

        return ['success', 'warning', 'danger'].indexOf(value) !== -1

      }

    },

    ...

}

type

可以是任一原生型別

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

也可以是自定義型別

class和style

從父組件給值時, 會和子組件合併

e.g.

• 子組件

<input class="AAA">

• 父組件

<my-input class="BBB">

最後渲染出來會是 <input class="AAA BBB">

source code