zoukankan      html  css  js  c++  java
  • uniapp

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

      

     

     

  • 相关阅读:
    springboot滚动分页展示列表(类似layui瀑布流效果)
    使用DOS命令运行JAVA项目
    MarkDown基础语法
    Springboot结构梳理
    VO层
    常用注解
    Java注解和反射笔记
    Java网络编程
    原理篇—sql注入5:pikachu靶机练习
    原理篇——sql注入2:联合查询注入
  • 原文地址:https://www.cnblogs.com/cisum/p/12197205.html
Copyright © 2011-2022 走看看