uni-app 组件小demo

留存一下，省的忘了。

 

    <!-- 子组件通过 $emit 控制父组件的事件 -->
    <!-- 父组件通过属性，给子组件传值 -->

　　

父组件引用

<template>
	<view>
		<shuru :huizi="'姓名'" v-model="data" @input="cc" @click="zudianji"></shuru>
		<view @click="houqu">获取一下看看</view>
	</view>
</template>

<script>
import shuru from '../../components/text_ipt/text_ipt.vue';
export default {
	components: {
		shuru
	},
	data() {
		return {
			data: ''
		};
	},
	methods: {
		houqu() {
			console.log('demo', this.data);
		},
		zudianji() {
			console.log('组件的点击');
		},
		cc(e) {
			console.log('看看cc有没有东西', e);
		}
	}
};
</script>

　　

子组件书写

<template>
	<view>
		<view class="tianxie-box" @tap="dianji">
			<view class="tianxie-huizi">{{ huizi }}</view>
			<input class="tianxie-heizi" :value="value" @input="input_nei($event.target.value)" :placeholder="'请输入' + huizi" type="text" />
		</view>
	</view>
</template>

<script>
export default {
	name: 'tianxie',
	props: {
		// 灰字
		huizi: {
			type: [String, Number],
			default: ''
		},
		//黑字
		hezi: {
			type: [String, Number],
			default: ''
		},
		value: {
			type: [String, Number],
			default: ''
		}
	},

	methods: {
		dianji() {
			this.$emit('click');
		},
		input_nei(e) {
			this.$emit('input', e);
		}
	}
};
</script>

<style scoped lang="scss">
.tianxie-box {
	min-height: 180upx;
	width: 670upx;
	margin: 0 auto;
	box-sizing: border-box;
	padding-top: 40upx;
	border-bottom: 1px solid #f1f1f1;
}

.tianxie-huizi {
	height: 40upx;
	line-hegiht: 40upx;
	font-size: 28upx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #999999;
}

.tianxie-heizi {
	min-height: 50upx;
	line-height: 50upx;
	margin-top: 20upx;
	font-size: 36upx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	width: 670rpx;
}

.tianxie-box1 {
	width: 670rpx;
	min-height: 180rpx;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-sizing: border-box;
	padding-top: 40rpx;
	border-bottom: 1px solid #f1f1f1;
}

.right_tip {
	width: 22rpx;
	height: 38rpx;
}
</style>