uni-app中创建组件以及组件中生命周期函数_uniapp 使用组件内函数

一 点睛

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

二 代码

1 创建 test.vue 组件

<template>
	<view id="myview">
		这是test组件{{num}}
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				num: 3,
				intId: null
			};
		},
		beforeCreate() {
			console.log('实例已经开始初始化了,但数据还没初始化完成，页面也没开始渲染')
			console.log(this.num)
		},
		created() {
			// 在这个里面初始化数据
			console.log('实例创建完成后被立即调用')
			console.log(this.num)
			this.intId = setInterval(() => {
				console.log('执行定时器')
			}, 1000)
		},
		beforeMount() {
			console.log('在挂载开始前被调用', document.getElementById('myview'))
		},
		mounted() {
			// 在这个里面操作dom
			console.log('挂载已完成', document.getElementById('myview'))
		},
		destroyed() {
			console.log('组件销毁了')
			// 清空定时器
			clearInterval(this.intId)
		}
	}
</script>
 
<style>
 
</style>

2 在 index.vue 页面中使用该组件

<template>
	<view class="content">
		<test v-if="flag"></test>
		<button type="primary" @click="checkTest">切换test组件</button>
	</view>
</template>
 
<script>
	/* 引入组件 */
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				flag: true
			}
		},
		onLoad() {
			console.log('页面加载了')
		},
		onShow() {
			console.log('页面显示了')
		},
		onReady() {
			console.log('页面初次渲染完成了')
		},
		onHide() {
			console.log('页面隐藏了')
		},
		methods: {
			checkTest() {
				this.flag = !this.flag
			}
		},
		// 组件组件
		components: {
			test: test
		}
	}
</script>
 
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
 
	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
 
	.text-area {
		display: flex;
		justify-content: center;
	}
 
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

三 效果