vue.js，是一個構建數據驅動的web 界面的庫。 Vue.js 的目標是通過盡可能簡單的API 實現響應的數據綁定和組合的視圖組件。 （這是官方的一個解釋！）
小編沒使用過angularjs，也沒使用過react.js，不能詳細的說明三者的區別，想了解的話，在官方有一個分析，請點這裡查看
小編從業前端開發也有了一年多的時間，剛開始的時候，前端開發展現的技術太多，小編有心無力，兼顧不過來，經過了解之後，還是選擇了學原生js基礎兼併jquery的學習上路。小編使用vue.js，也是因為業務的需求，為什麼不選擇angularjs，其實就是同時不能拋棄jquery，vue.js和jquery可以完美的兼容，因為這個項目，小編也是苦逼了好長一段時間，不斷的加班和學習，避免項目的開發時間增加，廢話不多說，下面開始一些小編的vue的學習總結，寫得不好，也不要見怪哈，寫文一直是我的短板。 。 。 。
父鏈小編這裡，就是vue的實例，作為父鏈
子組件可以通過this.parent它的父親組件。根實例的可以使用this.root 訪問它。父有一個數組this.children,它所有元素；當然，在項目中，我們的組件不可以只有一個或者兩個，當組件多了的時候，我們是難以記得children中該組件的位置的，我們可以利用v-ref 的指令，給我們的組件建立一個鉤子，這個鉤子，就是我們的其他組件訪問該組件時的索引
//這是我的一個組件<msg v-ref:msgs></msg> //這時候，我們就為這個msg組件建立了一個msgs的索引//我們可以這樣訪問組件var vm = new Vue({}); var children = vm.$refs.msgs //通過這種方式訪問我們的子組件//v-ref是一個數組或對象，是我們建立所有ref鉤子的組件的集合這裡，給大家看一張圖，看一下parent,children, $refs相關的內容（好像圖片有點模糊，不會整動態圖，尷尬了，看得不清楚，大家可以自己建立一個demo打印出來好好!）
儘管我們可以這樣直接訪問整個實例裡面的組件，但是不建議如此，因為子組件直接修改父組件的狀態，是非常糟糕的，這會讓父子組件緊密地耦合，理想的情況下，每個組件只能修改自己本身的狀態，因為每個組件的作用域都是獨立的；
這種情況下，vue也為我們帶來了它們的自定義事件
使用$dispatch() 派發事件，事件沿著父鏈冒泡；
使用$broadcast() 廣播事件，事件向下傳導給所有的後代。
看起來，有點抽象，來個例子，就好理解很多了
//$dispatch()冒泡案例<!-- 實例--><div id="app"><!-- 組件通訊一--><section> <div><label for="">msg的數據:</label>{{ msg }} </div><!--子組件--><msg></msg></section></div><template id="msg"><div><input type="text" v-model="msg"><a href="javascript:;" @click="add_data">添加</a></div></template><script>Vue.component('msg',{ //這裡直接使用了註冊組件的語法糖的方式註冊，簡單快捷template: '#msg',data: function() {return {msg : 'abc' }},methods: {add_data: function(){ //當點擊這個事件的時候，就會觸發$dispatch()方法；add_msg是父組件創建的監聽子組件的方法，意思就是，告訴父組件的這個方法，老爸，我更新數據了，par_msg就是我更新的數據，你也快更新吧！把par_msg 的數據傳給父組件更新！var par_msg = this.msg.trim();// this.$parent.add(par_msg); //此方式是直接操作父組件的方法this.$dispatch('add_msg', par_msg); //此方法是利用事件傳播的方式this.msg = '';}}});var mvvm = new Vue({el: '#app',data: {msg : ['sgsg']},events: { // 創建監聽相應響應子組件的事件'add_msg': function(msg){ // add_msg 是用來監聽子組件的方法，當接受到子組件的通知的時候，就把子組件更新的數據更新，這裡的msg就是子組件的par_msgthis.msg.push(msg);}},methods: {add: function(msg){this.msg.push(msg);}}});</script>看完這段代碼，相信大家都知道$dispatch()的冒泡的用法了，其實，就是這麼點東西，裡面有兩個參數，第一個參數，就是父組件監聽子組件events對象裡面的一個方法名，兩者要一致；第二個參數，就是子組件更新的數據，同時也是傳遞給給父組件要同步更新的數據，然後父組件就用這個參數來進行相應的操作
//$broadcast()方法的用法和$dispatch()的用法是一樣的，不一樣的是，event對像是在子組件裡面創建，相反觸發的函數在父組件；這裡要說的是，如果子組件的數據完全依賴於父組件的數據，那麼，則不需要用通說事件傳遞的方式，只需要通過props獲取父組件的數據，綁定到子組件身上就可以了
<!-- 組件通訊二$broadcast()方法--><section><h3>父組件添加的數據源：</h3><div><label for="">id:</label><div><input type="text" v-model="id"></div></div><div><label for="">姓名:</label><div><input type="text" v-model="name"></div></div><div><label for="">愛好:</label><div><input type="text" v-model="inst"></div></div><div><label for=""></label><div><a href="javascrip:;" @click="add_table">添加</a></div></div><h3>下面的表格是子組件信息：</h3><!-- 把父組件的table_data數據綁定到子組件上--><broadcase :data="table_data"></broadcase></section><template id="broadcase"><div><table><thead><tr><th>id</th><th>姓名</th><th>愛好</th></tr></thead><tbody><tr v-for="list in data"><td>{{ list.id }}</td><td>{{ list.name }}</td><td>{{ list.inst }}</td></tr></tbody></table></div></template><script>Vue.component('broadcase',{ //這裡直接使用了註冊組件的語法糖的方式註冊，簡單快捷template: '#broadcase',props: ['data'], // props是用來接受父組件的傳遞參數，也可在裡面自定義數據，如果數據需要有默認值的話，需在data裡面定義data: function() {return {msg : 'abc' }},events : { //這裡只是個例子，子組件監聽父組件的數據變化test : function(msg){console.log(msg);}},methods: {}});var mvvm = new Vue({el: '#app',data: {table_data: [{id: 1,name: 'gjei',inst: 'gjweir'},{id: 2,name: 'jiuyer',inst: 'oiuyt'}] },methods: {add_table: function(){var set = {id: this.id,name: this.name,inst : this.inst};this.table_data.push(set);// this.$broadcast('test', set); //這裡，只是一個例子語法this.id = '';this.name = '';this.inst = '';}}});</script>上處舉的兩個例子，都可以點擊這裡測試，文件已經上傳個人空間vue父子組件通訊demo
當寫到這裡的時候，回頭看了一下，自己寫的內容，貌似寫得有點亂，真是汗顏啊！很久之前就想過寫博客，建立自己的筆記庫，只是以前嘗試寫的時候，真是無法下手如何去寫，最近，下定決心，不管寫的怎麼樣，也堅持去寫，萬一哪天自己的文筆突然變得好起來了呢！
vue父子組件通訊，其實應用並不是很難，它其實也是提供了相應的api接口監聽，實際的項目應用該如何操作變化，還是得需要我們自己寫，重點，還是得要提高我們的js水平，畢竟，複雜的web應用越來越多！希望，喜歡前端的同學們都能在js的路上共勉.