vueの親コンポーネントと子コンポーネントの「値」は文法糖を双方向にバインドする.sync’

5161 ワード

vueでは、親子間の伝達値を双方向バインドと呼ぶ傍受 たとえば
<div><child :val='testV' @transfer='onVal'/>
	</div>
	
	methods: {
		ovVal (val) {
			this.testV= val
		}
	}<div>
		{{val}}
		  val  :
		<button @click=amendVal/>
	</div>
	
	props:['val'],
	methods:{
		amendVal () {
			this.$emit('transfer',newval)
		}	
	}
	
	`          emit()  ,        onVal       ,           ,

	      ,         `

そしてこのような煩雑な操作はvueの公式に見られたので、公式は文法糖を与えた`.sync’
したがって、親コンポーネントのパッシブなリスニングを省き、サブコンポーネントで値を直接リスニングできるため、より簡単な操作が可能になります.
<div><child :val.sync='testV'/>
	</div><div>
		{{val}}
		  val  :
		<button @click=amendVal/>
	</div>
	
	props:['val'],
	methods:{
		amendVal () {
			`update:`        `.sync`  
			this.$emit('update:val',newval)
		}	
	}
	
	          emit                  ,  ,value         
, , ,