【uni-app从入门到实战】组件学习

创建组件

在 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(