自定义组件

自定义组件可以为我们在开发中提供很大的帮助，页面中重复的部分我们便可以通过自定义组件来完成，这样就实现了写一次代码便可以在多个页面同时使用的好处，不仅让其他页面的代码量大大减少了，还可以减轻我们的工作量，提高我们的效率，下面就来说说自定义组件的使用：

• 首先在项目的components文件夹下新建一个vue文件，名字随意起就可以，如果没有components文件夹可以自己创建一个，在这里再解释一下为什么非得放在components文件夹里，因为components本身就有部件的意思，当我们使用uni-app的第三方组件时，使用Hbuilder时也会默认下载到components文件夹下，所以我们的components文件夹就是一个专门放组件的文件夹，在我们建好vue文件以后，就可以开始定义我们的组件

<template>
	<view class="page">
	<text>{{child}}</text>
	<text>{{title}}</text>
	</view>
</template>

<script>
	export default{
		data:function() {
			return{
				child:'这是子组件的值'
			}
		},
		props:['title']
	}
</script>

<style>
	.page{
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: white;
		background-color: #007AFF;
	}
</style>

这是子组件的样式：

• 下面我们在页面中引用自定义的组件，在page目录下新建index.vue文件（在其他的目录叫其他的名字也可以，但必须得是vue文件），引入组件的方法：
  import child from '@/components/test.vue'

引入后要在components中注册组件

components: {
			child
		},

之后就可以在页面中使用了：

<template>
	<view class="page">
		<child></child>
	</view>
</template>

看一下页面效果：

跟刚刚子组件中定义的是一样的，为了让大家看得更清晰，把页面的所有代码也放上来了

<template>
	<view class="page">
		<child></child>
	</view>
</template>

<script>
	import child from '@/components/test/test.vue'
	
	export default {
		components: {
			child
		},
		data() {
			return {
	
			}
		},
		onLoad() {

		},
		methods: {
		
		}	
	}
</script>

<style>
	
</style>

父子组件的传值

父组件传值给子组件

刚刚在定义子组件的之后写了一条props的语句：

没错，就是通过props来完成父组件向子组件传值的，子组件中写在props中的变量是不会在子组件中显示的，只能通过父组件将数值传个在props中定义的变量，事实上，子组件中props定义的变量，在父组件中使用的时候就成了子组件的属性名，我们通过给属性名赋值就完成了给子组件传值了，下面来看一下是怎么使用的：

<template>
	<view class="page">
		<child title='这是父组件传给子组件的值'></child>
	</view>
</template>

在看一下效果：

这样就完成了父组件传值给子组件了。

子组件传值给父组件

子组件传值给父组件是通过在子组件中使用$emit（eventName，optionalPayload）来触发事件，eventName为在父组件中触发的事件名，optionalPayload为所要传的变量名，在父组件中使用v-on来监听子组件触发的事件，下面介绍一下如何使用：
在子组件中增加触发事件：

<template>
	<view class="page">
	<text @click="onChild">{{child}}</text>
	<text>{{title}}</text>
	</view>
</template>

在script标签下写触发后的方法：

methods:{
			onChild:function(){
				console.log('触发了子组件事件')
				this.$emit('onFather',this.child)
			}
		}

在父组件中使用：

<template>
	<view class="page">
		<child title='这是父组件传给子组件的值' @onFather="click"></child>
	</view>
</template>

methods: {
		click:function(e){
			console.log(e)
		}
}	

写好后，点击“这是子组件的值”这句话就可以在控制台查看打印结果了：

这就说明我们已经成功将子组件的值传给父组件了。

总结

我所说的这些也只是自定义组件的最基础用法，在我们的实际项目中还会定义更多更复杂的组件，也希望大家通过这些自定义组件为自己的项目提供大大的帮助，另外，本人也是个小白，如果在文中有写错的地方欢迎指出。