vue子は親を伝え、子は親に値を伝え、方法の例

6404 ワード

vue子は親を伝え、子は親に値を伝え、方法の例
前回は親伝子propsの使い方を紹介し、この紹介子伝父e m i tの考え方過程を紹介した:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitの考え方過程を利用する:サブコンポーネントはイベントを実行することによってemitを利用してイベント名と伝達する必要がある値を送信する;親コンポーネントでは、サブコンポーネントのラベルにイベント名をバインドし、イベントを実行してイベントのパラメータを割り当てます.
サブアセンブリ
 //    
<template>
 	<div class="childDiv">
 		//               
 		<button @click="sendVal"></button>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				val: '123123'
			}
		},
		methods: {
			//     ,change         
			sendVal () {
				//   $emit    
				//             ,             
				this.$emit("sendMethod", this.val)
			}
		}
	}
</script>

親コンポーネント
 //    
<template>
 	<div class="fatherDiv">
 		//             
 		<ChildDiv @sendMethod="getMthodVal" />
	</div>
</template>
<script>
	//      
	import ChildDiv from "./components/childDiv"
	export default {
		data () {
			return {
				fatherVal: null
			}
		},
		//   childDiv  
		components: {
			ChildDiv
		},
		mounted () {
			//   getMthodVal  
			this.getMthodVal()
		},
		methods: {
			//     
			//   val       
			getMthodVal(val) {
				this.fatherVal= val
			}
		}
	}
</script>

子伝父はこんなに簡単で、純粋な手で打った.ありがとう!