uniapp - 组件的创建使用和组件的生命周期函数_uniapp页面周期函数如何导入

更多组件使用请查看 uniapp 官网：https://uniapp.dcloud.io/use?id=%e7%bb%84%e4%bb%b6

一. 组件的创建使用

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

1. 新建一个 test 组件

   <template>
   	<view>这是一个组件</view>
   </template>
   
   <script>
   </script>
   
   <style>
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9

2. 在其他组件中导入使用组件

   <template>
   	<view>
   		<!-- 第三步：使用组件 -->
   		<test></test>
   	</view>
   </template>
   
   <script>
   	//第一步：导用组件
   	import test from '../../component/test.vue'
   	export default {
   		//第二步：注册组件
   		components: {
   			test
   		},
   		data() {
   			return {}
   		}
   	}
   </script>
   
   <style>
   </style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23

二. 组件的生命周期函数

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

<script>
	export default {
		data(){
			return{
				number:1
			}
		},
		beforeCreate() {
			console.log('实例初始化',this.number)
		},
		created() {
			console.log('实例创建完成',this.number)
		},
		beforeMount() {
			console.log('实例挂载前调用',document.getElementById('test'))
		},
		mounted() {
			console.log('挂载实例之后调用',document.getElementById('test'))
		},
		beforeUpdate() {
			console.log('数据更新时调用')
		},
		updated() {
			console.log('由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子')
		},
		beforeDestroy(){
			console.log('Vue实例销毁之前调用')
		},
		destroyed(){
			console.log('Vue销毁之后调用')
		}
	}
</script>

<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40