這篇文章主要為大家展示了“Vue如何實現父子組件之間的通信功能”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Vue如何實現父子組件之間的通信功能”這篇文章吧。

在vue組件通信中其中最常見通信方式就是父子組件之中的通信，而父子組件的設定方式在不同情況下又各有不同。最常見的就是父組件為控制組件子組件為視圖組件。父組件傳遞數據給子組件使用，遇到業務邏輯操作時子組件觸發父組件的自定義事件。無論哪種組織方式父子組件的通信方式都是大同小異。

一、父組件到子組件通訊

　　父組件到子組件的通訊主要為：子組件接受使用父組件的數據，這里的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。vue提倡單項數據流，因此在通常情況下都是父組件傳遞數據給子組件使用，子組件觸發父組件的事件，并傳遞給父組件所需要的參數。

1、通過props傳遞數據

父子通訊中最常見的數據傳遞方式就是通過props傳遞數據，就好像方法的傳參一樣，父組件調用子組件并傳入數據，子組件接受到父組件傳遞的數據進行驗證使用。

<!--父組件-->
<template>
<div>
<h3>父組件</h3>
<br>
<Child-one:parentMessage="parentMessage"></Child-one>
</div>
</template>
<script>
importChildOnefrom'./ChildOne';

exportdefault{
components:{
ChildOne,
},
data(){
return{
parentMessage:'我是來自父組件的消息',
};
},
};
</script>
<stylescoped>
</style>

<!--子組件-->
<template>
<div>
<h4>我是子組件一</h4>
<span>{{parentMessage}}</span>
</div>
</template>
<script>
exportdefault{
props:['parentMessage'],
};
</script>
<stylescoped>
</style>

props可以接受function,所以function也可以以這種方式傳遞到子組件使用。

2、通過$on傳遞父組件方法

通過$on傳遞父組件方法是組件通信中常用的方法傳遞方式。它可以與通過props傳遞方法達到相同的效果。相比于props傳遞function,它更加的直觀和顯示的表現出了調用關系。

<!--父組件-->
<template>
<div>
<h3>父組件</h3>
<br>
<Child-one@childEvent="parentMethod"></Child-one>
</div>
</template>
<script>
importChildOnefrom'./ChildOne';

exportdefault{
components:{
ChildOne,
},
data(){
return{
parentMessage:'我是來自父組件的消息',
};
},
methods:{
parentMethod(){
alert(this.parentMessage);
},
},
};
</script>
<stylescoped>
</style>

<!--子組件-->
<template>
<div>
<h4>我是子組件一</h4>
</div>
</template>
<script>
exportdefault{
mounted(){
this.$emit('childEvent');
},
};
</script>
<stylescoped>
</style>

3、獲取父組件然后使用父組件中的數據（不推薦）

準確來說這種方式并不屬于數據的傳遞而是一種主動的查找。父組件并沒有主動的傳遞數據給子組件，而是子組件通過與父組件的關聯關系，獲取了父組件的數據。

該方法雖然能實現獲取父組件中的數據但是不推薦這種方式，因為vue提倡單向數據流，只有父組件交給子組件的數據子組件才有使用的權限，不允許子組件私自獲取父組件的數據進行使用。在父與子的關系中子應當是處于一種被動關系。

this.$parent

此處的this為子組件實例

二、子組件到父組件通訊

　　子組件到父組件的通訊主要為父組件如何接受子組件之中的數據。這里的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。

1、通過$emit傳遞父組件數據

與父組件到子組件通訊中的$on配套使用，可以向父組件中觸發的方法傳遞參數供父組件使用。

<!--父組件-->
<template>
<div>
<h3>父組件</h3>
<br>
<Child-one@childEvent="parentMethod"></Child-one>
</div>
</template>
<script>
importChildOnefrom'./ChildOne';
exportdefault{
components:{
ChildOne,
},
data(){
return{
parentMessage:'我是來自父組件的消息',
};
},
methods:{
parentMethod({name,age}){
console.log(this.parentMessage,name,age);
},
},
};
</script>
<stylescoped>
</style>

<!--子組件-->
<template>
<div>
<h4>我是子組件一</h4>
</div>
</template>
<script>
exportdefault{
mounted(){
this.$emit('childEvent',{name:'zhangsan',age:10});
},
};
</script>
<stylescoped>
</style>

2、refs獲取

可以通過在子組件添加ref屬性，然后可以通過ref屬性名稱獲取到子組件的實例。準確來說這種方式和this.$parent一樣并不屬于數據的傳遞而是一種主動的查找。

盡量避免使用這種方式。因為在父子組件通信的過程中。父組件是處于高位是擁有控制權，而子組件在多數情況下應該為純視圖組件，只負責視圖的展示和自身視圖的邏輯操作。對外交互的權利應該由父組件來控制。所以應當由父組件傳遞視圖數據給子組件，子組件負責展示。而子組件的對外交互通過$emit觸發父組件中相應的方法，再由父組件處理相應邏輯。

<template>
<div>
<h3>父組件</h3>
<br>
<Child-oneref="child"></Child-one>
</div>
</template>
<script>
importChildOnefrom'./ChildOne';
exportdefault{
components:{
ChildOne,
},
mounted(){
console.log(this.$refs['child']);
},
};
</script>
<stylescoped>
</style>

this.$refs['child']

總結

以上是生活随笔為你收集整理的Vue如何实现父子组件之间的通信功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。