組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。那么組件間如何通信，也就成為了vue中重點知識了。這篇文章將會通過props、$ref和 $emit 這幾個知識點，來講解如何實現父子組件間通信。
在說如何實現通信之前，我們先來建兩個組件father.vue和child.vue作為示例的基礎。
//父組件<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的方式導入子組件，并在components屬性中注冊，然后子組件就可以用標簽<child>的形式嵌進父組件了。運行father.vue后的效果是這樣的：
示例效果一
1.通過prop實現通信
子組件的props選項能夠接收來自父組件數據。沒錯，僅僅只能接收，props是單向綁定的，即只能父組件向子組件傳遞，不能反向。而傳遞的方式也分為兩種：
（1）靜態傳遞
子組件通過props選項來聲明一個自定義的屬性，然后父組件就可以在嵌套標簽的時候，通過這個屬性往子組件傳遞數據了。
<!-- 父組件 --><template> <div> <h1>我是父組件！</h1> <child message="我是子組件一！"></child> //通過自定義屬性傳遞數據 </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）動態傳遞
我們已經知道了可以像上面那樣給 props 傳入一個靜態的值，但是我們更多的情況需要動態的數據。這時候就可以用 v-bind 來實現。通過v-bind綁定props的自定義的屬性，傳遞去過的就不是靜態的字符串了，它可以是一個表達式、布爾值、對象等等任何類型的值。
<!-- 父組件 --><template> <div> <h1>我是父組件！</h1> <child message="我是子組件一！"></child> <!-- 這是一個 JavaScript 表達式而不是一個字符串。--> <child v-bind:message="a+b"></child> <!-- 用一個變量進行動態賦值。--> <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 實現通信
對于ref官方的解釋是：ref 是被用來給元素或子組件注冊引用信息的。引用信息將會注冊在父組件的 $refs 對象上。
看不懂對吧？很正常，我也看不懂。那應該怎么理解？看看我的解釋：
那如何通過$ref 實現通信？下面我將上面prop實現的功能，用$ref實現一遍：
<!-- 父組件 --><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>從上面的代碼我們可以發現，通過ref=‘msg'可以將子組件child的實例指給$ref，并且通過.msg.getMessage（）調用到子組件的getMessage方法，將參數傳遞給子組件。下面是“ console.log( this.$refs.msg);”打印出來的內容，這可以讓大家更加了解，究竟通過ref我們獲取了什么：
console.log
最后的效果是這樣的：
示例效果三
這里再補充一點就是，prop和$ref之間的區別：
3.通過$emit 實現通信
上面兩種示例主要都是父組件向子組件通信，而通過$emit 實現子組件向父組件通信。
對于$emit官網上也是解釋得很朦朧，我按我自己的理解是這樣的:
vm.$emit( event, arg )
$emit 綁定一個自定義事件event，當這個這個語句被執行到的時候，就會將參數arg傳遞給父組件，父組件通過@event監聽并接收參數。
<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>
示例效果三
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
