uniapp - v-modal


在uniapp中,也許有人會糾結為什么會有@input還有v-model

 

1.它們有什么區別?

v-model:數據雙向綁定->輸入時綁定視圖層,而@input則只是監聽值

@input:監聽輸入的值,可以通過監聽值再渲染到視圖層

 

 

 

2. v-model用在自定義組件上

v-model的缺陷是只能在自定義組件上用一次,而這時的雙向綁定就要交由.sync語法糖來解決了

 

<template>
	<!-- 父組件index.vue -->
	<view class="content">
		<onB v-model="hello" @valEvent="getValue"></onB>
		<input type="text" value="" v-model="hello" @input="hellos"/>
		{{hello}}
	</view>
</template>

<script>
	import onB from '@/components/onB.vue';
	export default {
		data() {
			return {
				hello: ''
			}
		},
		components:{
			onB
		},
		onLoad() {},
		mounted() {},
		methods: {
			hellos(e){
				console.log(e.detail.value);
			},
			getValue(e){
				console.log('getValue:',e);
			}
		}
	}
</script>

<style>
</style>

 

<template>
	<view @click="getValue">
		<!-- onB.vue子組件 -->
		子組件:{{val}}
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			val: String,
			default: ''
		},
		model: {
			prop: 'val',
			event: 'valEvent'
		},
		methods: {
			getValue(){
				this.$emit('valEvent',this.val);
			}
		},
		mounted() {}
	}
</script>

<style>

</style>

  

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM