uni-app封裝input組件用於登錄

組件

<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是一樣的哈