Vue項目中經常使用到組件之間的數值傳遞，實現的方法很多，但是原理上基本大同小異。

實現思路：

父 向 子 組件傳值：使用 props 屬性。( props 是property[屬性] 的復數簡寫 )

子 向 父 組件傳值：使用自定義事件。

一、父子組件單向傳值

1.1、父向子傳值

父向子組件傳值，子組件接收到數據之后，保存到自己的變量中。

1. //父組件寫法 
2. <cld :numP="num" ></cld> 
3.  
4. //子組件定義以及數據 
5. components:{ 
6.  cld:{ 
7.   template:'#child', 
8.   props:{ 
9.    numP:Number 
10.   }, 
11.  } 
12. } 
13.  
14. //子組件內容 
15. <template id="child"> 
16.  <div> 
17.   {{ numP }} 
18.  </div> 
19. </template> 

props 用于接收父組件傳過來的值，props 的寫法有很多種，具體如：

1. //方式1 ：  直接接收數據 
2. props: [ 'numP' ] 
3.  
4. //方式2： 加類型限制 
5. props: [ 
6.  numP: Number 
7.  ]  
8.  
9. //方式3：添加默認值 
10. props: [ 
11.  numP: { 
12.   type:Number, 
13.   default:0 
14.   } 
15. ]  
16.  
17. //方式4：是否必須值限制 
18. props: [ 
19.  numP: { 
20.   type:Number, 
21.   default:0, 
22.   require:true //添加必須值，不傳此值會報錯 
23.  } 
24. ]  
25.  
26. //方式5：采用對象形式 
27. props: { 
28.  numP: { 
29.   type:Number, 
30.   default:0, 
31.  } 
32. } 

1.2、子向父傳值

子向父組件傳值，主要通過自定義事件進行傳值，具體實例如下：

1. // 父組件內容 
2. <div> 
3.  子組件獲取到的數據{{getNum}} 
4.  <cld :numb="num" @accept="getNumC"></cld> 
5. </div> 
6.  
7. //父組件方法 
8. methods:{ 
9.  getNumC(data){ 
10.   this.getNum = data //接收子組件傳的數據 
11.  } 
12. }, 
13. //子組件定義 
14. components:{ 
15.  cld:{ 
16.   template:'#child', 
17.   data(){ 
18.    return{ 
19.     numC:1314 //子組件數據定義 
20.    } 
21.   }, 
22.   mounted(){ 
23.     this.$emit( 'accept' , this.numC ) // 觸發自定義事件 
24.    } 
25.   } 
26. }, 

二、父子組件數據雙向綁定

Vue 的數據都是單向流動的，而且 vue 中從來就沒有任何的雙向綁定，v-model 實現的雙向綁定只是語法糖而已。

方式1：利用 watch 實現父子組件的數據雙向綁定，具體實例如下：

方式2：.sync 修飾符實現雙向綁定

在vue 1.x 中的 .sync 修飾符所提供的功能。當一個子組件改變了一個帶 .sync 的 prop 的值時，這個變化也會同步到父組件中所綁定的值。這很方便，但也會導致問題，因為它破壞了單向數據流。(數據自上而下流，事件自下而上走)

1. <cld :numb.sync="num" ></cld> 
2. //會擴展為： 
3. <cld  :numb="bar"  @update:numb=”val => bar = val”/> 

當組件需要更新 numb 的值時，需要觸發更新事件：

1. this.$emit("update:numb", newValue ); 

使用具體實例如下：

1. // 父組件 
2. <Father :foo.sync="foo"></Father> 
3.  
4. //子組件 
5. props: ['foo'], 
6. data() { 
7.   return { 
8.    newFoo: this.foo; 
9.    } 
10. }, 
11. methods:{ 
12.  add:function(){ 
13.   this.newMsg=10; 
14.   this.$emit('update:foo',this.newFoo); 
15.  } 
16. } 

原文鏈接：https://www.toutiao.com/a7005375174686114340/