Vue---父子組件之間的通訊

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

1、父組件到子組件通信

　　父組件到子組件的通信主要爲：子組件接受使用父組件的數據，這裏的數據包括屬性和方法（String,Number,Boolean,Object, Array ,Function）。vue提倡單項數據流，所以在一般狀況下都是父組件傳遞數據給子組件使用，子組件觸發父組件的事件，並傳遞給父組件所須要的參數。

一、經過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也能夠以這種方式傳遞到子組件使用。

二、經過$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>

三、獲取父組件而後使用父組件中的數據（不推薦）

準確來講這種方式並不屬於數據的傳遞而是一種主動的查找。父組件並無主動的傳遞數據給子組件，而是子組件經過與父組件的關聯關係，獲取了父組件的數據。
該方法雖然能實現獲取父組件中的數據可是不推薦這種方式，由於vue提倡單向數據流，只有父組件交給子組件的數據子組件纔有使用的權限，不容許子組件私自獲取父組件的數據進行使用。在父與子的關係中子應當是處於一種被動關係。

 this.$parent

此處的this爲子組件實例

2、子組件到父組件通信

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

一、經過$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>

 

二、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']