vue js props驗證

paraller 發(fā)布于2019-08-21 17:41 / 448人閱讀

摘要：如果未指定驗證要求，會發(fā)出警告。當組件給其他人使用時這很有用。當驗證失敗了，如果使用的是開發(fā)版本會拋出一條警告。

組件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發(fā)出警告。當組件給其他人使用時這很有用。
prop 是一個對象而不是字符串數(shù)組時，它包含驗證要求：

Vue.component("example", {
  props: {
    // 基礎(chǔ)類型檢測 （`null` 意思是任何類型都可以）
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)字，有默認值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組／對象的默認值應當由一個工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: "hello" }
      }
    },
    // 自定義驗證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
});

type可以是下面的原生構(gòu)造器：

String

Number

Boolean

Function

Object

Array

type也可以是一個自定義構(gòu)造器，使用instanceof檢測。當prop驗證失敗了，如果使用的是開發(fā)版本會拋出一條警告。

GPU云服務器云服務器 Vue.js vue.js 屬性 vue.js自學 cdn vue.js

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89870.html

相關(guān)文章

vue.js學習筆記 - 組件（二）

摘要：當組件給其他人使用時這很有用，因為這些驗證要求構(gòu)成了組件的，確保其他人正確地使用組件。有特性的稱為命名。例如，假定我們有一個組件，它的模板為父組件模板渲染結(jié)果為一、注冊 // 定義 var MyComponent = Vue.extend({ template: A custom component! }); // 注冊 Vue.component(my-component, ...

Betta 2019-08-19 17:57 評論0 收藏0
Vue.js 第九課組件

摘要：組件是最強大的功能之一。組件可以擴展元素，封裝可重用的代碼。驗證組件可以為指定驗證要求。以下實例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個父組件關(guān)心的內(nèi)部事件。實例如果你想在某個組件的根元素上監(jiān)聽一個原生事件。組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。組件系統(tǒng)讓我們可以用獨立可復用的小組件來構(gòu)建大型應用...

church 2019-06-27 16:36 評論0 收藏0
封裝Vue組件的一些技巧

摘要：根據(jù)組件單向數(shù)據(jù)流和和事件通信機制，需要由子組件通過事件通知父組件，并在父組件中修改原始的數(shù)據(jù)，完成狀態(tài)的更新。本文同步在個人博客shymean.com上，歡迎關(guān)注寫Vue有很長一段時間了，除了常規(guī)的業(yè)務開發(fā)之外，也應該思考和反思一下封裝組件的正確方式。以彈窗組件為例，一種實現(xiàn)是在需要模板中引入需要彈窗展示的組件，然后通過一個flag變量來控制彈窗的組件，在業(yè)務代碼里面會充斥著冗余的彈...

韓冰 2019-05-23 17:35 評論0 收藏0
Vue.js非常重要之組件

摘要：它們之間必然需要相互通信父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生的事情告知給父組件。父組件通過向下傳遞數(shù)據(jù)給子組件，子組件通過給父組件發(fā)送消息。這是由使用的父組件決定的。 Vue.js的組件注冊組件全局注冊要注冊一個全局組件，你可以使用 Vue.component(tagName, options)。例如： Vue.component(my-component, { ...

ysl_unh 2019-08-21 16:16 評論0 收藏0
Vue初步了解組件——父子組件

摘要：父組件的數(shù)據(jù)需要通過才能下發(fā)到子組件中。這是為了防止子組件無意間修改了父組件的狀態(tài)，來避免應用的數(shù)據(jù)流變得難以理解。另外，每次父組件更新時，子組件的所有都會更新為最新值。組件什么是組件？組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況...

Bowman_han 2019-08-01 17:59 評論0 收藏0