vue2.0 子元件與父元件互相傳值以及自定義事件傳參問題
1、Vue是一個輕量級的漸進式架構，對于它的一些特性和優點在此就不做贅述，本篇文章主要來探讨一下Vue子父元件通信的問題。首先我們先搭好開發環境，我們首先得裝好git和npm這兩個工具(如果有不清楚的同學請自行百度哦)
環境搭建步驟：
1、打開git ，運作 npm install --global vue-cli 這是安裝vue的指令行
2、vue init webpack vue-demo 這是vue基于webpack的模闆項目
3、cd vue-demo 進入vue-demo檔案夾
4、npm install 安裝package.json中依賴的node_modules
5、npm run dev 運作該項目
剛剛我們建立的是vue基于webpack工具的一個模闆項目，對于webpack和熱加載這些不熟悉的同學不必在意，我們現在不會過多關注webpack的，不過建議對vue有興趣的同學還是去了解一下webpack，它也算是vue開發中的一個必備工具
2、接着我們進入Demo，首先我們可以删除掉模闆項目中src/components/Hello.vue,然後在App.vue中删除對于Hello子元件的注冊和使用還有一些其他無關緊要的東西，此時的App.vue應為這樣
App.png
3、父元件向子元件傳值
1.建立子元件，在src/components/檔案夾下建立一個Child.vue
2.Child.vue的中建立props，然後建立一個名為message的屬性
child.png
3.1、在App.vue中注冊Child元件，并在template中加入child标簽，标簽中添加message屬性并指派
3.2、儲存修改的檔案，檢視浏覽器
browser.png
3.3、我們依然可以對message的值進行v-bind動态綁定
App3.png
此時浏覽器中
browser2.png
父元件向子元件傳值成功
總結一下：
1、子元件在props中建立一個屬性，用以接收父元件傳過來的值
2、父元件中注冊子元件
3、在子元件标簽中添加子元件props中建立的屬性
4、把需要傳給子元件的值賦給該屬性
4、子元件向父元件傳值
4.1在子元件中建立一個按鈕，給按鈕綁定一個點選事件
Child2.png
4.2在響應該點選事件的函數中使用$emit來觸發一個自定義事件，并傳遞一個參數
Child3.png
4.3在父元件中的子标簽中監聽該自定義事件并添加一個響應該事件的處理方法
App4.png
4.4儲存修改的檔案，在浏覽器中點選按鈕
browser3.png
子元件向父元件傳值成功
總結一下：
1、子元件中需要以某種方式例如點選事件的方法來觸發一個自定義事件
2、将需要傳的值作為$emit的第二個參數，該值将作為實參傳給響應自定義事件的方法
3、在父元件中注冊子元件并在子元件标簽上綁定對自定義事件的監聽
在通信中，無論是子元件向父元件傳值還是父元件向子元件傳值，他們都有一個共同點就是有中間媒體，子向父的媒體是自定義事件，父向子的媒體是props中的屬性。抓準這兩點對于父子通信就好了解了
5、自定義事件傳參問題 – vue $emit 接收子元件參數 同時 在父元件 添加參數
子元件傳值給父元件使用，但是父元件需要選擇性使用子元件給的傳值
簡單舉例：
// 子元件
this.$emit('test',1,2);
//父元件
@test='testFather(arguments,888)';
methods：{
testFather(vals,userDefined){
//通路vals就可以得到子元件傳過來的值，userDefined是在父元件添加的自定義參數
console.log(vals[0] * userDefined); //888
},
}
綜上，有時候我們的子元件不隻用在一個頁面上面，比方說 上傳照片元件，就可以用在所有的需要上傳的頁面中，那麼，在使用過程中，頁面之間因為需求的不同，會需要單獨配置一些參數，用來處理子元件傳過來的數值。
這個方法是搜尋了很久，最後搜到了 尤大 的回答（參考資料裡面的第二個連結位址），故 強烈 mark 一下。
vue $emit子元件傳出多個參數，如何在父元件中在接收所有參數的同時添加自定義參數
自定義事件傳參問題
本文參考：https://www.cnblogs.com/daiwenru/p/6694530.html
https://blog.csdn.net/siwangdexie_copy/article/details/87637577