父往子傳值子頁面接受方案
default是默認值寒矿，type是限制類型
vue之父子組件間通信實例講解(props、ref若债、$emit)
這篇文章說的也很詳細
組件間如何通信符相，也就成為了vue中重點知識了。這篇文章將會通過props蠢琳、emit 這幾個知識點啊终，來講解如何實現(xiàn)父子組件間通信。
組件是 vue.js 最強大的功能之一傲须，而組件實例的作用域是相互獨立的蓝牲，這就意味著不同組件之間的數(shù)據(jù)無法相互引用。那么組件間如何通信躏碳，也就成為了vue中重點知識了搞旭。這篇文章將會通過props、emit 這幾個知識點菇绵，來講解如何實現(xiàn)父子組件間通信肄渗。
在說如何實現(xiàn)通信之前，我們先來建兩個組件father.vue和child.vue作為示例的基礎(chǔ)咬最。
`//父組件`
`<template>`
`<div>`
`<h1>我是父組件翎嫡！</h1>`
`<child></child>`
`</div>`
`</template>`
`<script>`
`import Child from` `'../components/child.vue'`
`export` `default` `{`
`components: {Child},`
`}`
`</script>`
`//子組件`
`<template>`
`<h3>我是子組件！</h3>`
`</template>`
`<script>`
`</script>`
這兩部分的代碼都很清晰明了永乌，父組件通過import的方式導(dǎo)入子組件惑申，并在components屬性中注冊，然后子組件就可以用標簽<child>的形式嵌進父組件了翅雏。運行father.vue后的效果是這樣的：
示例效果一
1.通過prop實現(xiàn)通信
子組件的props選項能夠接收來自父組件數(shù)據(jù)圈驼。沒錯，僅僅只能接收望几，props是單向綁定的绩脆，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：
（1）靜態(tài)傳遞
子組件通過props選項來聲明一個自定義的屬性靴迫，然后父組件就可以在嵌套標簽的時候惕味，通過這個屬性往子組件傳遞數(shù)據(jù)了。
`<!-- 父組件 -->`
`<template>`
`<div>`
`<h1>我是父組件玉锌！</h1>`
`<child message=``"我是子組件一名挥！"``></child>` `//通過自定義屬性傳遞數(shù)據(jù)`
`</div>`
`</template>`
`<script>`
`import Child from` `'../components/child.vue'`
`export` `default` `{`
`components: {Child},`
`}`
`</script>`
`<!-- 子組件 -->`
`<template>`
`<h3>{{message}}</h3>`
`</template>`
`<script>`
`export` `default` `{`
`props: [``'message'``]` `//聲明一個自定義的屬性`
`}`
`</script>`
（2）動態(tài)傳遞
我們已經(jīng)知道了可以像上面那樣給 props 傳入一個靜態(tài)的值，但是我們更多的情況需要動態(tài)的數(shù)據(jù)主守。這時候就可以用 v-bind 來實現(xiàn)禀倔。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態(tài)的字符串了参淫，它可以是一個表達式蹋艺、布爾值、對象等等任何類型的值黄刚。
`<!-- 父組件 -->`
`<template>`
`<div>`
`<h1>我是父組件！</h1>`
`<child message=``"我是子組件一民效！"``></child>`
`<!-- 這是一個 JavaScript 表達式而不是一個字符串憔维。-->`
`<child v-bind:message=``"a+b"``></child>`
`<!-- 用一個變量進行動態(tài)賦值。-->`
`<child v-bind:message=``"msg"``></child>`
`</div>`
`</template>`
`<script>`
`import Child from` `'../components/child.vue'`
`export` `default` `{`
`components: {Child},`
`data() {`
`return` `{`
`a:``'我是子組件二畏邢！'``,`
`b:112233,`
`msg:` `'我是子組件三业扒！'``+ Math.random()`
`}`
`}`
`}`
`</script>`
`<!-- 子組件 -->`
`<template>`
`<h3>{{message}}</h3>`
`</template>`
`<script>`
`export` `default` `{`
`props: [``'message'``]`
`}`
`</script>`
示例效果二
2.通過$ref 實現(xiàn)通信
對于ref官方的解釋是：ref 是被用來給元素或子組件注冊引用信息的。引用信息將會注冊在父組件的 $refs 對象上舒萎。
看不懂對吧程储？很正常，我也看不懂臂寝。那應(yīng)該怎么理解章鲤？看看我的解釋：
如果ref用在子組件上，指向的是組件實例咆贬，可以理解為對子組件的索引败徊，通過$ref可能獲取到在子組件里定義的屬性和方法。
如果ref在普通的 DOM 元素上使用掏缎，引用指向的就是 DOM 元素皱蹦，通過$ref可能獲取到該DOM 的屬性集合，輕松訪問到DOM元素眷蜈，作用與JQ選擇器類似沪哺。
那如何通過ref實現(xiàn)一遍：
`<!-- 父組件 -->`
`<template>`
`<div>`
`<h1>我是父組件辜妓！</h1>`
`<child ref=``"msg"``></child>`
`</div>`
`</template>`
`<script>`
`import Child from` `'../components/child.vue'`
`export` `default` `{`
`components: {Child},`
`mounted:` `function` `() {`
`console.log(` `this``.$refs.msg);`
`this``.$refs.msg.getMessage(``'我是子組件一！'``)`
`}`
`}`
`</script>`
`<!-- 子組件 -->`
`<template>`
`<h3>{{message}}</h3>`
`</template>`
`<script>`
`export` `default` `{`
`data(){`
`return``{`
`message:``''`
`}`
`},`
`methods:{`
`getMessage(m){`
`this``.message=m;`
`}`
`}`
`}`
`</script>`
從上面的代碼我們可以發(fā)現(xiàn)，通過ref=‘msg'可以將子組件child的實例指給refs.msg);”打印出來的內(nèi)容异逐，這可以讓大家更加了解捶索，究竟通過ref我們獲取了什么：
示例效果三
這里再補充一點就是，prop和$ref之間的區(qū)別：
- prop 著重于數(shù)據(jù)的傳遞灰瞻，它并不能調(diào)用子組件里的屬性和方法腥例。像創(chuàng)建文章組件時，自定義標題和內(nèi)容這樣的使用場景酝润，最適合使用prop燎竖。
- $ref 著重于索引，主要用來調(diào)用子組件里的屬性和方法要销，其實并不擅長數(shù)據(jù)傳遞构回。而且ref用在dom元素的時候，能使到選擇器的作用疏咐，這個功能比作為索引更常有用到纤掸。
3.通過$emit 實現(xiàn)通信
上面兩種示例主要都是父組件向子組件通信，而通過$emit 實現(xiàn)子組件向父組件通信浑塞。
對于$emit官網(wǎng)上也是解釋得很朦朧借跪，我按我自己的理解是這樣的:
`vm.$emit( event, arg )`
$emit 綁定一個自定義事件event，當這個這個語句被執(zhí)行到的時候酌壕，就會將參數(shù)arg傳遞給父組件掏愁，父組件通過@event監(jiān)聽并接收參數(shù)。
`<template>`
`<div>`
`<h1>{{title}}</h1>`
`<child @getMessage=``"showMsg"``></child>`
`</div>`
`</template>`
`<script>`
`import Child from` `'../components/child.vue'`
`export` `default` `{`
`components: {Child},`
`data(){`
`return``{`
`title:``''`
`}`
`},`
`methods:{`
`showMsg(title){`
`this``.title=title;`
`}`
`}`
`}`
`</script>`
`<template>`
`<h3>我是子組件卵牍！</h3>`
`</template>`
`<script>`
`export` `default` `{`
`mounted:` `function` `() {`
`this``.$emit(``'getMessage'``,` `'我是父組件果港！'``)`
`}`
`}`
`</script>`
