uniapp - 组件的创建使用和组件的生命周期函数

最新推荐文章于 2024-08-07 15:55:56 发布

原创最新推荐文章于 2024-08-07 15:55:56 发布 · 759 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

uni-app 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了uni-app中组件的创建和使用方法，包括创建一个vue文件作为组件，导入并注册组件的步骤。同时详细阐述了组件的生命周期函数，如beforeCreate、created、beforeMount、mounted等各个阶段的作用，展示了在不同生命周期中访问和操作数据及DOM的示例。通过这些生命周期函数，开发者可以更好地控制组件的状态和渲染过程。

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

一. 组件的创建使用

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

新建一个 test 组件

<template>
	<view>这是一个组件</view>
</template>

<script>
</script>

<style>
</style>

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

<template>
	<view>
		<!-- 第三步：使用组件 -->
		<test></test>
	</view>
</template>

<script>
	//第一步：导用组件
	import test from '../../component/test.vue'
	export default {
		//第二步：注册组件
		components: {
			test
		},
		data() {
			return {}
		}
	}
</script>

<style>
</style>

二. 组件的生命周期函数

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