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

迈不过友情╰ 2021-07-24 11:48 681阅读 0赞

# 一 点睛 #

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

# 三 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/bd4a2e4372c247aa8550ae892c47af1e.png