vue js props驗(yàn)證

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

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

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

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

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

String

Number

Boolean

Function

Object

Array

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/89870.html

相關(guān)文章

vue.js學(xué)習(xí)筆記 - 組件（二）

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

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

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

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

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

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

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

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

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

Bowman_han 2019-08-01 17:59 評(píng)論0 收藏0