上節(jié)課我們寫了一個計數(shù)器組件猿推，但是它每次初始化顯示出來都一樣，我們這節(jié)課學(xué)習(xí)通過父組件給子組件傳值铝阐，根據(jù)傳遞不同的值讓子組件有不同的效果宏粤。這就要用到組件一個重要功能porps。
這節(jié)課我們做一個超級英雄投票系統(tǒng)骂因，每個計數(shù)器顯示一個超級英雄的名字炎咖，點擊后給這個英雄投票，他的票數(shù)加一寒波。
方便起見乘盼，先把上節(jié)課的counter組件復(fù)制出來一個，改個名叫hero.vue俄烁，App.vue里的counter也都要改成hero
1）子組件定義一個prop
hero組件要放進(jìn)App.vue里使用绸栅，所以hero就是子組件了，我們給子組件增加一個prop叫heroName页屠，意思是初始化這個子組件時粹胯，子組件需要heroName這個參數(shù)
在vue中的語法是，在導(dǎo)出的對象增加一個屬性props辰企，
export default {
props:['heroName'], // 增加
data() {
return {
count: 0,
}
},
methods: {
onClick() {
this.count++
},
},
}
props是一個數(shù)組风纠，表明子組件要接受那些值最為參數(shù)，可以是多個牢贸，這里數(shù)組里只有一個元素竹观，表示我們我們接受一個叫heroName的參數(shù)
現(xiàn)在這么寫是沒有錯誤的，但是包含的信息有點少潜索，為了以后維護(hù)方便和vue更能理解我們的代碼臭增，我們給heroName這個參數(shù)多加點信息，寫法如下
props: {
heroName: {
type: String, // 表示heroName這個參數(shù)的數(shù)據(jù)類型是字符串
default: '', // 如果父組件沒有傳heroName這個參數(shù)時帮辟，默認(rèn)是空字符串
},
},
需要注意速址，這時props是一個對象object，不再是數(shù)組
這樣寫這個prop表達(dá)了三個信息
- hero這個組件可以接收一個叫heroName參數(shù)
- heroName這個參數(shù)必須是字符串類型
- heroName沒有傳遞時由驹，它的值是一個空字符串
這樣我們就為hero這個組件聲明了一個叫做heroName的prop芍锚，大家要記住這種寫法
ps：如果需要傳遞多個prop，就在props里面寫多個這樣的屬性蔓榄，形式是一樣
2）使用prop
prop的時候和data里面的屬性使用一樣并炮，在script直接可以使用this.訪問
mounted(){
console.log(this.heroName)
},
在template中也使用雙花括號來綁定
<div @click="onClick" class="counter-btn">
{{ heroName }}的票數(shù)是：{{ count }}，點擊增加
</div>
完整的代碼是
<template>
<div @click="onClick" class="counter-btn">
{{ heroName }}的票數(shù)是：{{ count }}甥郑，點擊增加
</div>
</template>
<script>
export default {
props: {
heroName: {
type: String,
default: '',
},
},
data() {
return {
count: 0,
}
},
mounted() {
console.log(this.heroName)
},
methods: {
onClick() {
this.count++
},
},
}
</script>
<style>
.counter-btn {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
border-radius: 5px;
cursor: pointer;
}
</style>
3）父組件給子組件傳遞prop
現(xiàn)在子組件全部都準(zhǔn)備好了逃魄，就等父組件傳值了，
父組件在template中澜搅，通過給子組件的標(biāo)簽添加屬性的方式傳值伍俘，一看就知道了
<hero heroName="鋼鐵俠"></hero>
在App.vue中添加一個數(shù)組邪锌，用來渲染多個超級英雄
data(){
return {
list: ['鋼鐵俠', '蜘蛛俠', '美國隊長', '蝙蝠俠'],
}
}
在template寫一個v-for循環(huán)
<ul>
<li v-for="(item, index) in list" :key="index" class="list-item">
<hero :heroName="item"></hero>
</li>
</ul>
這里需要注意一下，現(xiàn)在傳遞參數(shù)的是時候是通過一個動態(tài)變量item傳的癌瘾，所以在heroName前面加了冒號:,是v-bind:的簡寫
這樣我們的超級英雄投票系統(tǒng)就完成了
App.vue的完整代碼是
<template>
<div>
<ul>
<li v-for="(item, index) in list" :key="index" class="list-item">
<hero :heroName="item"></hero>
</li>
</ul>
</div>
</template>
<script>
import hero from './components/hero.vue'
// 組件基礎(chǔ)
export default {
name: 'App',
components: {
hero,
},
data() {
return {
list: ['鋼鐵俠', '蜘蛛俠', '美國隊長', '蝙蝠俠'],
}
},
}
</script>
<style>
.list-item {
margin: 10px;
}
</style>
需要注意的是觅丰，在傳遞prop時，如果是數(shù)字妨退、布爾值妇萄、數(shù)組、對象都需要加上冒號:
<!-- 即便 `42` 是靜態(tài)的咬荷，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達(dá)式而不是一個字符串冠句。 -->
<blog-post :likes="42"></blog-post>
<!-- 即便 `false` 是靜態(tài)的，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達(dá)式而不是一個字符串幸乒。 -->
<blog-post :is-published="false"></blog-post>
<!-- 即便數(shù)組是靜態(tài)的懦底，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達(dá)式而不是一個字符串。 -->
<blog-post :comment-ids="[234, 266, 273]"></blog-post>
<!-- 即便對象是靜態(tài)的逝变，我們?nèi)匀恍枰?`v-bind` 來告訴 Vue -->
<!-- 這是一個 JavaScript 表達(dá)式而不是一個字符串基茵。 -->
<blog-post
:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
上面是官網(wǎng)的說明
這節(jié)可以主要分為三點
- 使用prop向子組件傳值
- 子組件對prop的驗證：類型和默認(rèn)值的指定
- 在傳遞動態(tài)參數(shù)、數(shù)字壳影、布爾等值時拱层，一定要加冒號:,這是新手特別容易出錯的一個地方，大家一定要注意
