uniapp5组件的使用、组件的生命周期_uniapp vue3 h5生命周期

在主目录下创建components ，记得要和pages同级哦！

然后直接右键创建组件，把它引入到你想引入的页面

注意：创建组件时，不要用uniapp定义的组件名，比如text,view,image等

组件引入完成。

组件的生命周期 

uni-app 组件支持的生命周期与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期：

 在组件页面写组件的生命周期

注意：微信小程序中没有 document.getElementById('myview')

<template>
	<view>
		这是test组件··
		<view id="myview">
			给它引入到通讯录中{{num}}
		</view>
	</view>
</template>
 
<script>
	export default {
		name: "test",
		data() {
			return {
				num: 3,
				dingshiqi: null
			};
		},
		// 实例已经开始初始化了，但是数据还没有初始化完成，包括页面也没有开始渲染
		beforeCreate() {
			console.log('实例已经开始初始化了')
			console.log(this.num) //undefined		
		},
		// 可以拿到数据，包括被定义的方法
		created() {
			console.log('实例已经创建完成了')
			console.log(this.num) //3	
			// 给定时器赋值为空组件在销毁时，就不会再执行定时器
			this.dingshiqi = setInterval(() => {
				console.log('1秒钟执行一次定时器')
			}, 1000)
		},
		// 数据能够渲染在页面上，组件还没有
		beforeMount() {
			// console.log('beforeMount', document.getElementById('myview'))
			console.log(this.num) //3	
		},
		// 组件渲染到页面上
		mounted() {
			// console.log('mounted', document.getElementById('myview'))
			console.log(this.num) //3	
		},
		destroyed() {
			console.log('destroyed组件销毁')
			// 在组件销毁时，清除定时器
			clearInterval(this.dingshiqi)
		}
	}
</script>
 
<style>
 
</style>

 在引入组件的页面

<template>
	<view>
		<test v-if="flag"></test>
		<button type="primary" @click="qiehuan" v-if="!flag">显示test组件</button>
		<button type="primary" @click="qiehuan2" v-if="flag">隐藏test组件</button>
	</view>
</template>
 
<script>
	import test from '../../components/test.vue'
	export default {
		data() {
			return {
				flag:true
			}
		},
		components:{test},
		methods: {
			qiehuan(){
			 this.flag=true
			},
			qiehuan2(){
				this.flag=false
			}
		}
	}
</script>
 
<style>
 
</style>