携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

创建组件

在 uni-app 中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过import的方式导入，在通过components进行注册即可。我们来试一下：

我们在项目中新建 components 目录，同时在其中创建 test.vue 文件，这样一个组件就创造好了

我们在 index.vue 中使用它：

<template>
	<view class="content">
		<test></test>
	</view>
</template>

<script>
	import test from "@/components/test.vue"
	export default {
		components:{
			test
		}
	}
</script>

组件生命周期

组件生命周期官方文档

<script>
	export default {
		name:"test",
		data() {
			return {
				num:3
			};
		},
		beforeCreate() {
			console.log("beforeCreate","在实例初始化之前被调用")
			console.log(this.num)
		},
		created() {
			console.log("created","实例创建完成")
			console.log(this.num)
		}
	}
</script>

打印结果：

beforeCreate 在实例初始化之前被调用
undefined
created 实例创建完成
3

可以看到在 beforeCreate时，数据其实还没有初始化，所以打印结果是 undefined create时，实例创建完成，所以打印出了结果 3

我们接着看：

<template>
	<view id="myview">
		这是一个test组件
	</view>
</template>

<script>
	export default {
		......
		beforeMount() {
			console.log("beforeMount",document.getElementById('myview'))
		},
		mounted() {
			console.log("beforeMount",document.getElementById('myview'))
		}
	
	}
</script>

为了看效果，我们运行程序到浏览器，查看打印结果：

可以看到beforeMount时，组件还没有渲染到页面上 mounted时，组件就渲染到页面上了，所以在这个方法里操作 dom

beforeUpdate和updated仅H5平台支持，也就是在数据更新前后调用，这里不做演示

我们来演示 beforeDestroy 和 destroyed，首先修改 index.vue，使用一个变量来隐藏或显示 test 组件，然后增加一个按钮来改变这个变量的值

	<view class="content">
		<test v-if="flag"></test>
		<button @click="changeFlag">点我切换组件显示</button>
	</view>
</template>

<script>
	import test from "@/components/test.vue"
	export default {
		components:{
			test
		},
		data(){
			return{
				flag:true
			}
		},
		methods:{
			changeFlag(){
				this.flag = !this.flag
			}
		}
	}
</script>

<style>
</style>

然后在 test.vue 中打印这两个生命周期变化

		beforeDestroy() {
			console.log("beforeDestroy","组件销毁前")
		},
		destroyed() {
			console.log("destroyed","组件销毁了")
		}

来看下运行结果：

总结： create可以在其中初始化一些数据 mounted可以在其中操作dom destoryed可以来销毁定时器，可以这样写：

<script>
	export default {
		name:"test",
		data() {
			return {
				initId:null
			};
		},
		created() {
			this.initId = setInterval(()=>{
				console.log("执行定时器")
			},1000)
		},
		destroyed() {
			clearInterval(this.initId)
		}
	}
</script>

uni-ui组件库的介绍和使用

日历组件使用

扩展组件 uni-ui

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架

uni-ui不包括基础组件，它是基础组件的补充

我们来演示下使用日历组件， 点击下载&安装

跳转 uni-calendar 日历页面，点击使用 HBuilderX 导入插件按钮

如果刚才的页面登录了账号的话，会打开 HBuilder 的这个页面，选择我们的项目导入日历插件（如果没有打开这个页面，请看下一小节的错误解决）

这样根目录下会增加 uni-calendar 目录和文件

我们在 index.vue 中使用下，直接放入以下代码即可：

<uni-calendar 
    :insert="true"
    :lunar="true" 
    :start-date="'2019-3-2'"
    :end-date="'2019-5-20'"
    @change="change"
     />

运行：

uni_modules处理外部应用请求未能完成

如果上一小节安装日历插件，HBuilder 有如下提示：

可以尝试打开工具——插件安装，找到 uni_modules 进行卸载

然后在安装新插件选项卡中，找到 uni_modules 重新安装即可