vuejs prop的用法：1、使用Prop傳遞數據，語句如「<child message="hello!"></child>」；2、用v-bind動態綁定props的值到父組件的資料中等等。
本文操作環境：windows7系統、vue2.9.6版，DELL G3電腦。
Vuejs Prop基本用法
一、使用Prop傳遞資料
元件實例的作用域是孤立的。這意味著不能並且不應該在子組件的模板內直接引用父組件的資料。可以使用props把資料傳給子元件。
prop是父元件用來傳遞資料的一個自訂屬性。子元件需要顯示的地用props選項宣告”prop”
Vue.component('child',{
props:['message'],
template:'<span>{{ message }}</span>'
})然後向它傳入一個普通字串：
<child message="hello!"></child>
結果：
hello!
二、camelCase vs .kebab-case
html不區分大小寫。當使用非字串模板時，prop的名字形式會從camelCase轉為kebab-case（短橫線隔開）：
//camelCase
Vue.component('child',{
props:['myMessage'],
template:'<span>{{ message }}</span>'
})//kebab-case <child my-message="hello!"></child>
再次說明，如果你是用字串模板，不用在意這些限制。
三、動態Prop
類似於用v-bind綁定HTML特性到一個表達式，也可以用v-bind動態綁定props的值到父元件的資料中。每當父組件的資料變更時，該變更也會傳導給子元件。
<div>
<input v-model="parrentMsg">
<br>
<child v-bind:my-message="parrentMsg"></child>
</div>使用v-bind的縮寫語法通常更簡單：
<child :my-message="parrentMsg"></child>
四、字面量語法vs動態語法
因為它是一個字面prop ，它的值以字串"1" 而不是以實際的數字傳下去。如果想要傳遞一個實際的JavaScript 數字，則需要使用v-bind ，從而讓它的值被當作JavaScript 表達式計算：
五、單項資料流
prop是單項綁定的：當父元件的屬性改變時，將傳導給子元件，但是不會反過來。這是為了防止子元件無意修改了父元件的狀態——這會讓應用程式的資料流難以理解。同時，這也很好理解，父組件是子組件的高度抽象，表示子組件的共有部分，一個組件的資料改變並不會改變其抽象，然而其抽象的改變卻代表著所有子組件的改變。
另外，每次群組漸漸更新時，子元件的所有prop都會更新為最新值。這意味著你不應該在子元件內部改變prop。如果你這麼做了，Vue會在控制台給予警告。
通常有兩種改變prop的情況：
1.prop作為初始值傳入，子元件之後只是將它的初始值作為本地資料的初始值使用；
2.prop作為需要被轉換的原始值傳入。
更確切地說這兩種情況是：
a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。
“`
props: [‘initialCounter’],
data: function () {
return { counter: this.initialCounter}
}
b.定义一个 computed 属性，此属性从 prop 的值计算得出。
```
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}六、Prop驗證
元件可以為 props 指定驗證要求。如果未指定驗證要求，Vue 會發出警告。當組件給其他人使用時這很有用。
prop 是一個物件而不是字串陣列時，它包含驗證要求：
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
type: String,
required: true
},
// 数字，有默认值
propD: {
type: Number,
default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
type: Object,
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
}
}
})type可以是下面的原生建構器：
* String
* Number
* Boolean
* Function
* Object
* Array
type也可以是自訂建構器，使用instanceof檢測。當prop驗證失敗了，如果使用的是開發版本會拋出警告。
推薦：《最新的5個vue.js影片教學精選》
以上是vuejs prop的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
