vue,uni-app等,父组件获取子组件的值

雨点打透心脏的1/2处 2023-06-12 09:51 38阅读 0赞

##### 使用环境 #####

使用软键盘时,键盘为组件,输入框是父组件…键盘的输入值要传到父组件输入框上  
(.sync加了才可以使用this.$emit)

(this.$emit(‘update:参数名’,值))

##### 例子 #####

##### test.vue #####

<template>
    	<view>
    		<view style="background: #fff;padding:20upx;margin-top:20upx" class="pay_t">
    			<view class='pay_t_t'>请输入付款金额</view>
    			<view style="display: flex;align-items: center;font-size: 80upx;font-weight: bold;height: 140upx;border-bottom: 1px solid #C0BFC4;" class='pay_t_m'><text style="margin-left: 20upx;">¥</text>
    			{ { money}}</view>
    		</view>
    		
    		<testcount :money.sync="money"></testcount>
    	</view>
    </template>
    
    <script>
    	import testcount from "@/components/testcount.vue"
    	export default { 
    		name:"test",
    		components:{ 
    			testcount
    		},
    		data() { 
    			return { 
    				money:'',
    			};
    		},
    	}
    </script>
    
    <style lang="less">
    	.pay_t{ 
    		view{ 
    			padding:10upx;
    		}
    	}
    </style>

##### testcount.vue(软键盘组件,自己封装,可以改动) #####

<template>
    	<div>
    		<button @click="add"> add</button>
    	</div>
    </template>
    <script>
    	export default{ 
    		name:"testcount",
    		data(){ 
    			return { 
    				money:'',
    			}
    		},
    		methods:{ 
    			add(){ 
    				this.money+=1;
    				}
    	},
    		watch:{ 
    			money(val){ 
    				console.log("改变",val);
    				this.$emit('update:money',val);   //主要
    				
    			}
    		},
    	}
    </script>
    
    <style>
    </style>