uni-app学习：9、简单自定义组件说明

居家隔离14-10 快解放啦。。。

简单的input组件

<template name="first_input">
	<view>
		<input type="text" :placeholder="placeholder" class="myinput" v-model="val" />
		<button type="primary" @click="fun_submit">修改父页面数据</button>
	</view>
</template>

<script>
	export default {
		name: "myinput",
		data() {
			return {
				val: ''
			}
		},
		//属性
		props: {
			placeholder: {
				type: String, //属性类型
				value: "请输入..."
			}
		},
		//组件生命周期
		created: function(e) {

		},
		methods: {
			fun_submit: function() {
				console.log('输入数据=' + this.val);
				// 组件调用父组件的方法 myevent为对应自定义方法名 和vue里相关方法一样
				this.$emit('myevent', this.val);
			},
		}
	}
</script>

<style>
	.myinput {
		padding: 5px;
		background-color: #d6d6dd;
		margin-top: 10px;
	}
</style>

使用

<template>
	<view class="content">		
		<view>{{store_value}}</view>
		<myinput v-on:myevent="fun_test1" placeholder="请输入姓名"></myinput>
		<myinput v-on:myevent="fun_test2" placeholder="请输入年龄"></myinput>
	</view>
</template>

<script>
	import myinput from "../../components/first_input.vue"
	var _self;
	export default {
		components:{
			myinput
		},
		data() {
			return {				
				store_value: ''
			}
		},
		onLoad() {
			_self = this;			
		},
		methods: {			
			fun_test1:function(val){
				_self.store_value=val+'  111';
			},
			fun_test2:function(val){
				_self.store_value=val+'  222';
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 20upx;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}

	h5 {
		margin-top: 10px;
	}
</style>

文件目录

实测成功

来源：oschina

链接：https://my.oschina.net/qingqingdego/blog/3174080

标签

uni-app