uni-app封装input组件用于登录

Posted 2021-02-28 流年少年

组件

<template>
	<view>
		<view class="uni-form-item uni-column">
			<input class="my-uni-input" @blur="replaceInput" v-model="changeValue"  :placeholder="placer" />
		</view>
	</view>	
	
</template>

<script>
export default {
	data() {
		return {
			changeValue:""
		};
	},
	props:{
		placer:{
			type:String
		}
	},
	
	methods:{
		replaceInput(){
			this.$emit(\'myblur\',[this.changeValue])
		}
	}
}
</script>

<style>
.my-uni-input{
	margin: 10rpx  auto;
	width: 700rpx;
	height: 80rpx;
	border:none;
	border-bottom:1px solid #CCCCCC;
	/* text-indent: 20rpx; 不兼容小程序*/
	padding-left: 20rpx;
	}
</style>

使用

<my-input @myblur="myblur" placer="请输入账号"></my-input>
<my-input @myblur="myblur" placer="请输入密码"></my-input>

import aa  from "../../components/search.vue"//引入

components:{
    "my-input":aa
},
methods:{
  myblur(messarr){
    console.log("父组件接受到的值",messarr  )
  }
}

封装这个组件input，主要运用了vue中的父传子。和子传父。
父传子，props
子传父，this.$emit()
@blur="replaceInput" 失去焦点。
双向数据绑定和vue是一样的哈