Vue2組件間通信——父傳子值props
Vue2中組件間通信系列，本篇是關于父組件向子組件傳值的介紹，這里我會用通俗的語言幫助大家理解props配置項
功能：
子組件可以接收到父組件傳遞的資料資訊，適用于組件間通信，對于父傳子props配置相相對來說是較為方便的
傳遞方式：
<template>
<div>
<Son :msg="Str" :Job='job'/>
</div>
</template>
<script>
import Son from './Son.vue'
export default {
name:'Father',
data(){
return{
Str:'hello',
job:{
salary:'30k'
}
}
},
components:{
Son
}
}
</script>
傳遞方式很簡單，只需在子組件中傳入父組件想傳遞的資訊即可，msg和Job是我們的自定義寫法，不過要注意的是在前面要加v-bind指令，
不然“ ”中的值會被當做字串傳入Son組件中
接受方式：
-
陣列型別的接收方式
export default {
name:'Son',
props:['msg','Job'],
mounted(){
console.log(this.msg)
console.log(this.Job)
}
}
列印結果：
hello
{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ? reactiveGetter()
set salary: ? reactiveSetter(newVal)
[[Prototype]]: Object
用陣列的形式來接收傳遞過來的資訊看起來起來像是傻瓜形式的接受，因為我們并沒有對接受結果做限制，我們可以看到在鉤子里可以使用this來拿到資料，所以說傳遞過來的資訊也是在組件實體身上的，
-
帶有限制的接收方式
export default {
name:'Son',
props:{
msg:{
type:String, //型別
required:false, //是否必填
default:'你好' //默認值
},
Job:Object //簡寫
},
mounted(){
console.log(this.msg)
console.log(this.Job)
}
}
列印結果：
你好
{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ? reactiveGetter()
set salary: ? reactiveSetter(newVal)
[[Prototype]]: Object
相比于陣列型別接收資料，采用配置物件的形式來接收資料可以很好地限制父組件傳遞過來的資料資訊，上面在父組件中并沒有傳遞msg，所以
msg列印出的結果是配置項中的默認值 你好
這里我們可能有個疑問，父向子傳遞資料之后 子組件會永久存盤著傳遞過來的資料嗎？對于不同的父組件呢？
<template>
<div>
<Father/>
<Son :msg="Str2" :Job="myjob"/>
</div>
</template>
<script>
import Father from './components/Father.vue'
import Son from './components/Son.vue'
export default {
name:'App',
data(){
return{
Str2:'world',
myjob:{
salary:'10k'
}
}
},
components:{
Father,
Son
}
}
</script>
列印結果：
你好
{__ob__: Observer}
salary: "30k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ? reactiveGetter()
set salary: ? reactiveSetter(newVal)
[[Prototype]]: Object
world
{__ob__: Observer}
salary: "10k"
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get salary: ? reactiveGetter()
set salary: ? reactiveSetter(newVal)
[[Prototype]]: Object
? 這里我們在App組件中也向Son組建中傳遞了相關資料，我們可以看出控制臺分別列印了兩次 msg和Job 的結果， 很明顯Son組件作為子組件對于Faher組件和App組件分別掛載了一次，對應的mounted鉤子也分別執行一次，每次列印的資訊都是對應父組件傳遞的相關資料，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/297321.html
標籤：其他
上一篇：[框架/插件-第三期] 還在用Bootstrap？這10個CSS框架可以嘗試！！！
下一篇：cgb2107-day08