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>