Vueサブアセンブリ親コンポーネントに値を渡す親コンポーネントに値を渡すdemoサンプルコード

QQ技術交流群1736683866 526474645交流討論に参加することを歓迎して、広告の一律の飛行機の切符を打ちます
Vueサブコンポーネントが親コンポーネントに値を渡すには、カスタムイベントを使用する必要があります.
プロセス:
1.サブコンポーネントはカスタムイベントを作成してリスニングします.
2.イベント関数でemit関数を実行し、emitを介して親コンポーネントに伝達したい値を渡す
3.親コンポーネントは、子コンポーネント上でemit定義のイベント名をリスニングし、自身の関数をバインドし、関数のパラメータで子コンポーネントが渡すパラメータを受信します.
効果図:
実装コード:

	
		
		
		
		
	

	
		

			

				
{{ total }}

				
				
				
				
			
		

		
			Vue.component('button-counter', {
				//1.   $on(eventName)    
				template: '<button v-on:click="addCounter"> {{idx}}    ： {{ counter }}</button>',
				props:['idx'],
				data: function() {
					return {
						counter: 0
					}
				},
				methods: {
					//           
					addCounter: function() {
						this.counter += 1;
						var str ='   '+this.idx+'    ,    ：'+this.counter;
						//2.   $emit(eventName,obj)        
						//increment:                ，str:             
						this.$emit('increment',str);
					}                                                                                                                                                            
				},
			})
			new Vue({
				el: '#counter-event-example',
				data: {
					total: 0
				},
				methods: {
					appAddCounter: function(e) {
						console.log('      ：',e)
						this.total += 1
					}
				}
			})