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

一、父元件到子元件通訊

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

1、通過props傳遞資料

父子通訊中最常見的資料傳遞方式就是通過props傳遞資料，就好像方法的傳參一樣，父元件呼叫子元件並傳入資料，子元件接受到父元件傳遞的資料進行驗證使用。

 1 <!--父元件-->
 2 <template>
 3   <div>
 4     <h2>父元件</h2>
 5     <br>
 6     <Child-one :parentMessage="parentMessage"></Child-one>
 7   </div>
 8 </template>
 9
 
 <script>
10   import ChildOne from './ChildOne';
11 
12   export default{
13     components: {
14       ChildOne,
15     },
16     data() {
17       return {
18         parentMessage: '我是來自父元件的訊息',
19       };
20     },
21   };
22 </script>
23 <style scoped>
24 </style>

 1 <!--
 
子元件-->
 2 <template>
 3   <div>
 4     <h3>我是子元件一</h3>
 5     <span>{{parentMessage}}</span>
 6   </div>
 7 </template>
 8 <script>
 9   export default{
10     props: ['parentMessage'],
11   };
12 </script>
13 <style scoped>
14 </style>

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

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

通過$on傳遞父元件方法是元件通訊中常用的方法傳遞方式。它可以與通過props傳遞方法達到相同的效果。相比於props傳遞function,它更加的直觀和顯示的表現出了呼叫關係。

 1 <!--父元件-->
 2 <template>
 3   <div>
 4     <h2>父元件</h2>
 5     <br>
 6     <Child-one @childEvent="parentMethod"></Child-one>
 7   </div>
 8 </template>
 9 <script>
10   import ChildOne from './ChildOne';
11 
12   export default{
13     components: {
14       ChildOne,
15     },
16     data() {
17       return {
18         parentMessage: '我是來自父元件的訊息',
19       };
20     },
21     methods: {
22       parentMethod() {
23         alert(this.parentMessage);
24       },
25     },
26   };
27 </script>
28 <style scoped>
29 </style>

 1 <!--子元件-->
 2 <template>
 3   <div>
 4     <h3>我是子元件一</h3>
 5   </div>
 6 </template>
 7 <script>
 8   export default{
 9     mounted() {
10       this.$emit('childEvent');
11     },
12   };
13 </script>
14 <style scoped>
15 </style>

3、獲取父元件然後使用父元件中的資料（不推薦）

準確來說這種方式並不屬於資料的傳遞而是一種主動的查詢。父元件並沒有主動的傳遞資料給子元件，而是子元件通過與父元件的關聯關係，獲取了父元件的資料。 該方法雖然能實現獲取父元件中的資料但是不推薦這種方式，因為vue提倡單向資料流，只有父元件交給子元件的資料子元件才有使用的許可權，不允許子元件私自獲取父元件的資料進行使用。在父與子的關係中子應當是處於一種被動關係。

 this.$parent

此處的this為子元件例項

二、子元件到父元件通訊

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

1、通過$emit傳遞父元件資料

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

 1 <!--父元件-->
 2 <template>
 3   <div>
 4     <h2>父元件</h2>
 5     <br>
 6     <Child-one @childEvent="parentMethod"></Child-one>
 7   </div>
 8 </template>
 9 <script>
10   import ChildOne from './ChildOne';
11 
12   export default{
13     components: {
14       ChildOne,
15     },
16     data() {
17       return {
18         parentMessage: '我是來自父元件的訊息',
19       };
20     },
21     methods: {
22       parentMethod({ name, age }) {
23         console.log(this.parentMessage, name, age);
24       },
25     },
26   };
27 </script>
28 <style scoped>
29 </style>

 1 <!--子元件-->
 2 <template>
 3   <div>
 4     <h3>我是子元件一</h3>
 5   </div>
 6 </template>
 7 <script>
 8   export default{
 9     mounted() {
10       this.$emit('childEvent', { name: 'zhangsan', age:  10 });
11     },
12   };
13 </script>
14 <style scoped>
15 </style>

2、refs獲取

可以通過在子元件新增ref屬性，然後可以通過ref屬性名稱獲取到子元件的例項。準確來說這種方式和this.$parent一樣並不屬於資料的傳遞而是一種主動的查詢。 儘量避免使用這種方式。因為在父子元件通訊的過程中。父元件是處於高位是擁有控制權，而子元件在多數情況下應該為純檢視元件，只負責檢視的展示和自身檢視的邏輯操作。對外互動的權利應該由父元件來控制。所以應當由父元件傳遞檢視資料給子元件，子元件負責展示。而子元件的對外互動通過$emit觸發父元件中相應的方法，再由父元件處理相應邏輯。

 1 <template>
 2   <div>
 3     <h2>父元件</h2>
 4     <br>
 5     <Child-one ref="child"></Child-one>
 6   </div>
 7 </template>
 8 <script>
 9   import ChildOne from './ChildOne';
10 
11   export default{
12     components: {
13       ChildOne,
14     },
15     mounted(){
16       console.log(this.$refs['child']);
17     },
18   };
19 </script>
20 <style scoped>
21 </style>

1 this.$refs['child']