? ? ? ? 最近在學習用vue2.0進行項目的開發，由于接手項目的時候，項目的完整架構已經搭建完畢，為了不破壞之前的項目，我就采用了比較古老的寫法，說實話不采用es6的語法去寫，有好多事情都變得比較麻煩了，不過原理還是一樣的。

1、父子組件如何通信
? ? ? 在寫組件的時候，建議先去官網上去看一遍? https://cn.vuejs.org/v2/guide/components.html，我直接先貼上自己的代碼，先談談子組件如何向父組件傳送數據的，思維反過來，哈哈

在js中我只截取了一部分核心代碼，下面的為子組件里的代碼: 暫定序號為圖二
var child = new component("page-component",{
? ? ? props:["totalCount"],
? ? ? data:function(){
? ? ? ? ? ? ? return{
? ? ? ? ? ? ? ? ? totalPages:this.totalCount,
? ? ? ? ? ? ? ? ? rows:5,
? ? ? ? ? ? ? ? ? currentPage:1
? ? ? ? ? ? ? ? }
? ? ? ? },
? ? ? watch:{
? ? ? ? ? ?currentpage:function(newValue,oldValue){
? ? ? ? ? ? ? ? ? ? ? ? if(newValue !== oldValue){
? ? ? ? ? ? ? ? ? ? ? ? ? this.$emit("pagechange",this.currentPage);? ?
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ?
? ? ? ? ? ? },
? ? ? ? ? ? rows:function(newValue,oldValue){
? ? ? ? ? ? ? ? if(newValue !== oldValue){
? ? ? ? ? ? ? ? ? ? ?this.$emit("rowschange",this.rows);
? ? ? ? ? ? ? ?}

? ? ? ? ? ?}

? ? ?}
})

接下來為父容器的代碼:暫定序號為圖三

var app = new Vue({
? ? ?el:"ruleApp",
? ? ?data:{
? ? ? ? totalCount:5
? ? ?},
? ? ?methods:{
? ? ? ? ?changePage:function(data){
? ? ? ? ? ? ?console.log(data);
? ? ? ? ? },
? ? ? ? ?changeRow:function(data){ ?
? ? ? ? ? ? ? console.log(data);
? ? ? ? ? }

? ? ? }

})
序號暫定為圖四

? ? ? 官網上講的只是一個大概，只有自己實踐過才能有自己的理解， 我現在大概說說自己的理解
關于組件的注冊及組件在頁面上正常的引用，這塊我認為大家都已經理解了，所以就跳過這塊不說了
? ? ? 第一步：首先看圖一中，我在組件page-component中自定義了兩個事件用來監聽事件響應，
v-on:pagechange="changePage" 這個我們可以看成是 v-on:click="changPage"這種形式，只不過pagechange是為了當子組件為了向父組件傳遞數據的時候，觸發的一個事件（可以理解為：為了某種目的，而自定義的一個事件，在需要他的時候進行觸發，而pagechange就相類似于click的功能，只不過它不是通過點擊來觸發的）然后我們在子組件中可以使用$emit來實時的觸發這個事件，我這邊是在子組件中使用了watch來監聽當前頁數以及需要一頁展示的行數，當其中的一個數據發生變化時，觸發pagechange或者rowchange事件，你可以理解為一個點擊事件或者其他的事件，來通知父組件進行實時的響應，參看圖二。這樣子組件已經將自己想要發出的數據通過事件廣播的方式，發出去了，接下來父容器就需要去接受這個數據了。
? ? ? ?第二步：父容器接受子組件觸發的事件進行事件響應
看圖三，結合圖一，圖二來進行分析，首先當子組件監聽到currentPage或者rows數據變化的時候會
執行this.$emit("pagechange",this.currentPage)和this.$emit("rowschange",this.rows);這個方法，第一參數是觸發的事件類型（such as click）第二個參數 是需要傳遞的數據，此時執行完這步之后，頁面上就有pagechange和rowschange的事件觸發了，當這個事件觸發之后就會去執行對應的事件函數即在父容器定義的方法changPage和changRow，這樣子組件觸發事件然后父容器進行事件響應，這樣數據就完成了從子到父的傳遞。
? ? ? ?其中需要注意一個問題，如果你像圖四那樣進行定義，見上面（圖不知道為何排版不穩定亂跳，就只好給它標個序號，見上圖四）：即將事件類型寫成page-change或者pageChange這種類似的，然后js中定義的為pageChange,親測過，這樣寫頁面是不起作用的，所以自定義事件也要遵循事件定義標準。

2.父向子傳遞數據
? ? ? 這個就比較好理解了 參考圖一html的寫法 :total-count="totalNumbers" 其中totalNumbers是父容器將要傳給子組件的數據，然后total-count相當于一個連接兩者的橋梁通過如下方式進行連接
var child = new component("page-component",{
? ? ? props:["totalCount"],
? ? ? data:function(){
? ? ? ? ? ? ?return{
? ? ? ? ? ? ? ? totalPages:this.totalCount//這樣就可以使用父容器傳過來的數據了? ? ? ?
? ? ? ? ? }
? ? ? }

通過關鍵屬性props接受橋梁完成橋的搭建，這樣就可以在子組件中使用傳過來的數據了