首页 > 移动平台 > 详细

uniapp - v-modal

时间:2020-01-15 16:42:11      阅读:153      评论:0      收藏:0      [点我收藏+]

在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>

  

 

 

uniapp - v-modal

原文:https://www.cnblogs.com/cisum/p/12197205.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!