前置知识：

①：在以前vue项目中，要想使用组件得时候，有三个步骤。

创建子组件、

在父组件中注册，

然后使用

②：在uniapp中就更加简单了，但是有他自己得规范，easycom组件规范。

        只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

创建父组件My,子组件MyEvent，pubTitle。 

1：父传子

基本逻辑：

子组件中定义props属性，来接受父组件传过来得值。

父组件

<pubTitle   :list="[4, 5, 6]" 
            :user="{ user: '张三', gender: '女' }" 
            :time="time" 
            :title="test" 
            subtitle="index page">
</pubTitle>

data() {
		return {
			time:Date.now(),
			test:"123",
			SonToFather:""
		};
	}

子组件

<template>
	<view class="pubTitle">
		<view class="time">{{time}}</view>
		<view class="big">{{title}}</view>
		<view class="small">{{subtitle}}</view>
		<view>{{list}}</view>
		<view>{{user}}</view>
		<view class="line"></view>
	</view>
</template>

<script>
	export default {
		name:"pubTitle",
		// props:["title",'subtitle'],
		props:{
			title:{
				type:String,
				default:"默认标题"
			},
			subtitle:{
				type:String,
				default:"默认副标题"
			},
			time:{
				type:Number,
				default:Date.now()
			},
			list:{
				type:Array,
				default(){
					return [1,2,3]
				}
			},
			user:{
				type:Object,
				default(){
					return {name:"匿名",gender:"保密"}
				}
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.pubTitle{ 
	padding:60rpx 30rpx;
	text-align: center;
	background: #B9EDF8;
	.big{ 
		font-size: 50rpx;
		font-weight: 600;
		color:#1F6ED4;
	}
	.small{ 
		font-size: 28rpx;
		color:#39BAE8;
	}
	.line{ 
		display: inline-block;
		width: 100rpx;
		height: 10rpx;
		background: #0000A1;
		border-radius: 10rpx;
	}
}
</style>

2：子传父

父组件

<view class="sonTOfather">
		<view class="show">子向父传</view>
		<myevent @message="getSonMes"></myevent>
		<view class="active">
			从子组件中获取到的值：{{SonToFather}}
		</view>
</view>

methods:{
		getSonMes(e){
			console.log(e);
			this.SonToFather = e;
		}
	}

子组件

<view class="main">
     <input class="myinput" v-model="message" @input="myinput" />
</view>

methods: {
		myinput() {
			this.$emit('message', this.message);
		}
	}

这里面得message一定要和父组件中得@message一样，必须名称一样