1.父子組件傳值
首先我要說的是父組件如何向子組件傳值
傳的值分為靜態(tài)值和動(dòng)態(tài)值
1.傳靜態(tài)值
//這是父組件
<city-header title="123"></city-header>//把title傳給子組件
//這是子組件
export default {
props:"title",//在子組件接收父組件傳來的值用prop來接收
}
2.傳動(dòng)態(tài)值
//這是父組件
//用v-bind綁定可傳動(dòng)態(tài)的值
<city-header :weekendList="weekendList"></city-header>//把title傳給子組件
export default {
data (){
return{
weekendList:[]//數(shù)組里面的內(nèi)容是從后端接口獲取的動(dòng)態(tài)值
}
},
}
//這是子組件
export default {
props:{
weekendList:Array
default: [0,1,2,3,4]//如果為空值則使用默認(rèn)的
}//在子組件接收父組件傳來的值用prop來接收
}
當(dāng)然氮墨，你傳的值可以是數(shù)字、對(duì)象吐葵、數(shù)組等等规揪，參見vue官網(wǎng)。
以上就是單向數(shù)據(jù)流的一般表現(xiàn)了： 父級(jí) prop 的更新會(huì)向下流動(dòng)到子組件中温峭，但是反過來則不行猛铅。
2、子組件向父組件傳值
上面說了父組件向子組件傳值用prop向下傳遞凤藏，那么子組件向父組件傳值呢奸忽？其實(shí)子組件向父組件傳值通過觸發(fā)$emit方法向上傳遞
image.png
這是vue官方文檔的一張圖片，簡(jiǎn)約而不簡(jiǎn)單揖庄。大概意思就是：
父組件通過prop給子組件下發(fā)數(shù)據(jù)栗菜，子組件通過emit事件給父組件發(fā)送信息。
使用$emit(eventName,optionalPayload)觸發(fā)事件蹄梢。另外疙筹，父組件可以在使用子組件的地方直接用v-on來監(jiān)聽子組件觸發(fā)的事件。
接下來給你們看個(gè)實(shí)例吧。
<!-- 父組件 -->
<template>
<div>
<home-header @childDemo="parentDemo"></home-header>
<br/>
子組件傳來的值 : {{message}}
</div>
</template>-+
<script>
export default {
// ...
data: {
message: ''
},
methods: {
parentDemo(childVaule) {//childVaule是子組件傳過來的值
this.message = childVaule;
}
}
}
</script>
<!-- 子組件 -->
<template>
<div>
<input type="text" v-model="message" />
<button @click="click">點(diǎn)擊</button>
</div>
</template>
<script>
export default {
data() {
return {
// 默認(rèn)
message: '我是來自子組件的消息'
}
},
methods: {
click() {
//通過$emit觸發(fā)childDemo事件而咆，順便把message傳遞過去
this.$emit('childDemo', this.message);
}
}
}
</script>
當(dāng)點(diǎn)擊按鈕的時(shí)候使用$emit()觸發(fā)事件霍比，把message傳給父組件。
這樣我們就基本實(shí)現(xiàn)了子組件向父組件傳值了暴备。
