vue2.0組件通訊各類狀況總結與實例分析

Props在vue組件中各類角色總結

在Vue中組件是實現模塊化開發的主要內容，而組件的通訊更是vue數據驅動的靈魂，現就四種主要狀況總結以下：

使用props傳遞數據---組件內部

//html
<div id="app1"> <i>注意命名規定：僅在html內使用my-message</i> <child my-message="組件內部數據傳遞"></child> </div> //js <script> Vue.component('child', { props: ['myMessage'], template: '<mark>{{ myMessage }}<mark/>' }); new Vue({ el: '#app1' }) </script>

動態props通訊---組件與根節點(父子之間)

<div id="app2"> <input v-model="parentMsg"> <br> <child :parent-msg="parentMsg"></child> </div> <script> Vue.component('child', { props: ['parentMsg'], template: '<mark>{{ parentMsg }}<mark/>' }); new Vue({ el: '#app2', data: { parentMsg: 'msg from parent!' } }) </script>

• 對比分析：

• 例子1:

  <comp some-prop="1"></comp> //組件內部數據傳遞，對應字面量語法:傳遞了一個字符串"1" 

• 例子2:

  <comp v-bind:some-prop="1"></comp> //組件與根節點數據傳遞，對應動態語法:傳遞實際的數字:js表達式 

  單向數據流動特色：父組件屬性變化時將傳導給子組件，反之不可

• 兩種改變prop狀況

• 注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

  //定義一個局部data屬性，並將 prop 的初始值做爲局部數據的初始值 props: ['initialCounter'], data: function () { return { counter: this.initialCounter } } //定義一個局部computed屬性，此屬性從 prop 的值計算得出 props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }

  子組件索引

  儘管有 props 和 events ，可是有時仍然須要在 JavaScript 中直接訪問子組件。爲此可使用 ref 爲子組件指定一個索引 ID

  <div id="parent"> <!-- vm.$refs.p will be the DOM node --> <b ref="p">hello</b> <!-- vm.$refs.child will be the child comp instance --> <user-profile v-for='i in 3' ref="profile"></user-profile> </div> <script> var userPf=Vue.component('user-profile',{ template:'<div>hello $refs</div>' }); var parent = new Vue({ el: '#parent' }); // 訪問子組件 var child = parent.$refs.profile; console.log(child[0]); console.log(parent.$refs.p); </script>

  $refs 只在組件渲染完成後才填充，而且它是非響應式的。它僅僅做爲一個直接訪問子組件的應急方案——應當避免在模版或計算屬性中使用 $refs 。

數據反傳---自定義事件

自定義事件的根基在於每一個vue實例都實現了事件接口（Event interface）
Vue的事件系統分離自瀏覽器的EventTarget API。儘管它們的運行相似，可是$on 和 $emit 不是addEventListener 和 dispatchEvent 的別名。
父組件能夠在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件

• 監聽：$on(eventName)

• 觸發：$emit(eventName)

  <div id="app3"> <p>Look at the parent's data: <mark>{{t}}</mark> & the child's data: <mark>{{childWords}}</mark></p> <child v-on:add="pChange"></child> <child v-on:add="pChange"></child> <child v-on:click.native="native"></child> </div> <script> Vue.component('child', { template: `<button @click="add">{{ c }}</button>`, data: function () { return { c: 0, msg: 'I am from child\'s data' } }, methods: { add: function () { this.c += 1; this.$emit('add',this.msg); } }, }); new Vue({ el: '#app3', data: { t: 0, childWords: '' }, methods: { pChange: function (msg) { this.t += 1; this.childWords=msg; }, native:function () { alert('I am a native event ,which comes from the root element！'); } } }) </script>

  兄弟間通訊---簡單場景用bus，複雜場景用vuex

<div id="app4"> <display></display> <increment></increment> </div> <script> var bus = new Vue(); Vue.component('increment', { template: `<button @click="add">+</button>`, data: function () { return {count: 0} }, methods: { add: function () { bus.$emit('inc', this.count+=1) } } }); Vue.component('display', { template: `<span>Clicked: <mark>{{c}}</mark> times</span>`, data: function () { return {c: 0} }, created: function () { var self=this; // bus.$on('inc', function (num) { // self.c = num // }); bus.$on('inc', (num) => this.c = num ); } }); vm = new Vue({ el: "#app4", }) </script>

總結：Vue中關於組件間及組件與根節點間通訊均可以人爲是父子兄弟間的通訊，另外父子關係是相對的即與上下文有關（好比A組件的父組件多是B組件的子組件）；上述四個例子分別演示了不一樣組件通訊的機制。