Vue的Props實(shí)例配置詳解

更新時(shí)間：2022年11月05日 08:55:17 作者：歡萊

props主要用于組件的傳值,他的工作就是為了接收外面?zhèn)鬟^(guò)來(lái)的數(shù)據(jù),與data、el、ref是一個(gè)級(jí)別的配置項(xiàng),下面這篇文章主要給大家介紹了關(guān)于Vue組件如何設(shè)置Props的相關(guān)資料,需要的朋友可以參考下

1、Prop 的大小寫(xiě)

HTML 中的屬性名大小寫(xiě)不敏感，瀏覽器會(huì)把所有大寫(xiě)字符解釋為小寫(xiě)字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase (駝峰命名法) 的 prop 名需要使用其等價(jià)的 kebab-case (短橫線(xiàn)分隔命名) 命名：

子組件接收數(shù)據(jù)：

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

父組件傳數(shù)據(jù)：

<!-- 在 HTML 中是 kebab-case 短橫線(xiàn)分隔命名 -->
<blog-post post-title="hello"></blog-post>

2、Prop 類(lèi)型

子組件指定（限制）父組件傳入的Prop的值的類(lèi)型。當(dāng)子組件接收到錯(cuò)誤的類(lèi)型時(shí)從瀏覽器的 JavaScript 控制臺(tái)提示用戶(hù)。

// 接收數(shù)據(jù)并對(duì)數(shù)據(jù)進(jìn)行類(lèi)型限制
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

不限制Prop類(lèi)型是這樣寫(xiě)：

// 簡(jiǎn)單的聲明接收（不能聲明不傳過(guò)來(lái)的數(shù)據(jù)）
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

3、Prop驗(yàn)證

在子組件定制接收的 prop 的驗(yàn)證方式，可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象。如果有一個(gè)需求未滿(mǎn)足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告。

  props: {
    // 基礎(chǔ)的類(lèi)型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類(lèi)型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類(lèi)型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      // propC的類(lèi)型
      type: String,
      // 設(shè)置 propC 必須傳遞過(guò)來(lái)   
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      // propD可傳可不傳，不傳則值默認(rèn)為100
      default: 100
    },
    // 帶有默認(rèn)值的對(duì)象
    propE: {
      type: Object,
      // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠(chǎng)函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

4、傳遞靜態(tài)|動(dòng)態(tài) Prop

傳入一個(gè)字符串

傳靜態(tài)值：

<blog-post title="hello"></blog-post>

prop 通過(guò) v-bind 動(dòng)態(tài)賦值：

<!-- 動(dòng)態(tài)賦予一個(gè)變量的值，該變量值post.title是字符串 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 動(dòng)態(tài)賦予一個(gè)復(fù)雜表達(dá)式的值 ，post.title和post.author值是字符串-->
<blog-post
  v-bind:title="post.title + ' and ' + post.author"
></blog-post>
......
data() {
	return {
		post: { title:"aaa", author:"bbb" },
	}
}

以上傳入的值都是字符串類(lèi)型的，但任何類(lèi)型的值都可以傳給 prop，如：

傳入一個(gè)數(shù)字

<!-- 即便 `42` 是靜態(tài)的，仍然需要 `v-bind` 來(lái)告訴 Vue -->
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<blog-post v-bind:likes="42"></blog-post>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。-->
<blog-post v-bind:likes="post.likes"></blog-post>

傳入一個(gè)布爾值

<!-- 包含該 prop 沒(méi)有值的情況在內(nèi)，都意味著 `true`。-->
<blog-post is-published></blog-post>
<!-- 即便 `false` 是靜態(tài)的，仍然需要 `v-bind` 來(lái)告訴 Vue -->
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<blog-post v-bind:is-published="false"></blog-post>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。-->
<blog-post v-bind:is-published="post.isPublished"></blog-post>

傳入一個(gè)數(shù)組

<!-- 即便數(shù)組是靜態(tài)的，仍然需要 `v-bind` 來(lái)告訴 Vue -->
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。-->
<blog-post v-bind:comment-ids="post.commentIds"></blog-post>

傳入一個(gè)對(duì)象

<!-- 即便對(duì)象是靜態(tài)的，仍然需要 `v-bind` 來(lái)告訴 Vue -->
<!-- 這是一個(gè) JavaScript 表達(dá)式而不是一個(gè)字符串。-->
<blog-post
  v-bind:author="{
    name: 'Veronica',
    company: 'Veridian Dynamics'
  }"
></blog-post>
<!-- 用一個(gè)變量進(jìn)行動(dòng)態(tài)賦值。-->
<blog-post v-bind:author="post.author"></blog-post>

傳入一個(gè)對(duì)象的所有 property

<blog-post v-bind="post"></blog-post>
......
post: {
  id: 1,
  title: 'My Journey with Vue'
}

5、修改Prop數(shù)據(jù)

若想對(duì)接收的prop數(shù)據(jù)進(jìn)行修改,則需要在data中重新定義，不能直接對(duì)prop修改，即this.postTitle = "hhh"會(huì)報(bào)錯(cuò)。

<h3>{{ postTitle }}</h3>
<h3>{{ myTitle }}</h3>
<button @click="xiu"></button>
......
  // 在 js 中是 camelCase 駝峰命名法 
  props: ['postTitle'],
      
  // 若想對(duì)接收的prop數(shù)據(jù)進(jìn)行修改,則需要在data中重新定義，不能直接對(duì)prop修改，即this.postTitle = "hhh"會(huì)報(bào)錯(cuò)。
  ......
  data() {
	 return {
		myTitle: this.postTitle,
	}
  },
  methods: {
      xiu() {
          this.myTitle = "hhh";
      }
  }

注意：也可以不寫(xiě)：props: ['postTitle']來(lái)接收，因?yàn)?code>this.$attrs中有傳來(lái)的數(shù)據(jù)postTitle ，可以直接使用。但是我們一般不這樣寫(xiě)。因?yàn)椴荒芟拗祁?lèi)型，寫(xiě)著麻煩等。

當(dāng)接收props: ['postTitle']時(shí)，this.$attrs中就不存在傳來(lái)的數(shù)據(jù)postTitle 了。

到此這篇關(guān)于Vue的Props實(shí)例配置詳解的文章就介紹到這了,更多相關(guān)Vue Props內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: