這次給大家帶來怎樣實現vue父子組件間通信，實現vue父子組件間通信的注意事項有哪些，下面就是實戰案例，一起來看一下。
元件是 vue.js 最強大的功能之一，而元件實例的作用域是相互獨立的，這意味著不同元件之間的資料無法相互引用。那麼組件間如何通信，也就成為了vue中重點知識了。這篇文章將會透過props、$ref和 $emit 這幾個知識點，來講解如何實作父子元件間通訊。
在說如何實現通訊之前，我們先來建立兩個元件father.vue和child.vue作為範例的基礎。
//父组件
<template>
<p>
<h1>我是父组件！</h1>
<child></child>
</p>
</template>
<script>
import Child from '../components/child.vue'
export default {
components: {Child},
}
</script>//子组件 <template> <h3>我是子组件！</h3> </template> <script> </script>
這兩部分的程式碼都很清晰明了，父元件透過import的方式導入子元件，並在components屬性中註冊，然後子元件就可以用標籤
範例效果一
1.透過prop實作通訊
子元件的props選項能夠接收來自父元件資料。沒錯，僅僅只能接收，props是單向綁定的，也就是只能父元件向子元件傳遞，不能反向。而傳遞的方式也分為兩種：
（1）靜態傳遞
子元件透過props選項來宣告一個自訂的屬性，然後父元件就可以在嵌套標籤的時候，透過這個屬性往子組件傳遞資料了。
<!-- 父组件 -->
<template>
<p>
<h1>我是父组件！</h1>
<child message="我是子组件一！"></child> //通过自定义属性传递数据
</p>
</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>
<p>
<h1>我是父组件！</h1>
<child message="我是子组件一！"></child>
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<child v-bind:message="a+b"></child>
<!-- 用一个变量进行动态赋值。-->
<child v-bind:message="msg"></child>
</p>
</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用在子元件上，指向的是元件實例，可以理解為子元件的索引，透過$ref可能取得到在子元件上裡定義的屬性和方法。
如果ref在普通的DOM 元素上使用，引用指向的就是DOM 元素，透過$ref可能取得到該DOM 的屬性集合，輕鬆存取到DOM元素，作用與JQ選擇器類似。
那如何透過$ref 實作通訊？下面我將上面prop實現的功能，用$ref實作一遍：
<!-- 父组件 -->
<template>
<p>
<h1>我是父组件！</h1>
<child ref="msg"></child>
</p>
</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我們取得了什麼：
$ref 着重于索引，主要用来调用子组件里的属性和方法，其实并不擅长数据传递。而且ref用在dom元素的时候，能使到选择器的作用，这个功能比作为索引更常有用到。
3.通过$emit 实现通信
上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。
对于$emit官网上也是解释得很朦胧，我按我自己的理解是这样的:
vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
<template>
<p>
<h1>{{title}}</h1>
<child @getMessage="showMsg"></child>
</p>
</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>
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
怎样使用nodejs express配置自签名https服务器
以上是怎樣實作vue父子組件間通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！
