vue組件之前的傳值可以分為三類：

1，父傳子

父傳子的用法：

在子組件中需要用到父組件的值，需要在子組件中定義props選項，props:[‘字符串名1‘,‘字符串名2‘]，props中的數據和data中的數據用法一樣，

使用子組件時,通過動態綁定自定義屬性獲取父組件的值例如：<component-a :字符串名1="父組件data中的數據" :字符串名2="父組件data中的數據"></component-a>

在子組件中使用數據，可以在template中用插值表達式使用{{字符串名1}}

2，子傳父

首先 在子組件中有有一個數據data中定義 cont:100；

然後在子組件的methods中寫一個方法fn1(),在這個方法中用創建一個自定義事件this.$emit(自定義事件名,this.cont)；

把這個自定義事件綁定在子組件的開始標簽位置（父組件中使用子組件<child-a @自定義事件=‘父組件methods中的方法fn2‘）；

觸發子組件中的fn1(),比如點擊某一個按鈕去觸發

在父組件方法fn2中可以獲得到 子組件的數據svg就是子組件cont的值 fn2(svg){ console.log(svg); this.data中的數據 = svg }

在父組件中可以用插值表達式來使用{{data中的接收了svg的數據}}

註意：這裏講的是傳了一個數字，也可以傳數組和對象，$emit自定義事件，是vue給我們提供的寫法

3，兄弟組件之間的通信

情景：在父組件中有並列的兩個子組件child-a和child-b

前置條件->js綁定+觸發事件

綁定事件 this.$on(事件名,函數(接收的形參){})

觸發事件 this.$emit(事件名,數據)

在child-a中：點擊按鈕觸發方法->在方法中寫觸發事件vm.$emit(事件名,要傳的數據)

在child-b中：綁定事件vm.$on(事件名,(接收的參數)=>{})

註意：在兩個組件中，需要用共同的vm實例對象，傳值才管用，所以這裏可以單獨寫一個js文件

js文件中的代碼： import Vue form ‘vue‘;

const vm = new Vue();

淺談vue傳值