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>