Vue的Props實例配置詳解

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

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

1、Prop 的大小寫

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

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

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

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

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

2、Prop 類型

子組件指定（限制）父組件傳入的Prop的值的類型。當(dāng)子組件接收到錯誤的類型時從瀏覽器的 JavaScript 控制臺提示用戶。

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

不限制Prop類型是這樣寫：

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

3、Prop驗證

在子組件定制接收的 prop 的驗證方式，可以為 props 中的值提供一個帶有驗證需求的對象。如果有一個需求未滿足，則 Vue 會在瀏覽器控制臺中警告。

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

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

傳入一個字符串

傳靜態(tài)值：

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

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

<!-- 動態(tài)賦予一個變量的值，該變量值post.title是字符串 -->
<blog-post v-bind:title="post.title"></blog-post>
<!-- 動態(tài)賦予一個復(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" },
	}
}

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

傳入一個數(shù)字

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

傳入一個布爾值

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

傳入一個數(shù)組

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

傳入一個對象

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

傳入一個對象的所有 property

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

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

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

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

注意：也可以不寫：props: ['postTitle']來接收，因為this.$attrs中有傳來的數(shù)據(jù)postTitle ，可以直接使用。但是我們一般不這樣寫。因為不能限制類型，寫著麻煩等。

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

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

您可能感興趣的文章: