14、uniapp组件的创建和组件生命周期

uniapp里组件创建和组件的生命周期和vue里组件一致。

组件创建

创建一个vue文件即可

<template>
		<view>
			<h2>测试组件</h2>			
		</view>
</template>

<script>
	export default{
		name:'test',
		data(){
			return{
				intid:''
			}
		},
		mounted(){
			this.intid=setInterval(()=>{
				console.log('hello');
			},1000);
		},
		
		beforeDestroy() {
			clearInterval(this.intid);
		}
	}
</script>

<style>
</style>

外部组件引入即可挂载即可使用

<template>
	<view class="content">
		<view>
			<test v-if="isShow"></test>
			<button v-on:click='bye'>关闭组件</button>
		</view>		
	</view>
</template>

<script>
	
	import test from '../../components/test.vue'
	
	export default {
		data() {
			return {
				isShow:true,
			}
		},
		methods:{
			bye(){
				this.isShow=false;
			}
		},
		components:{
			test
		}
	}
</script>

组件生命周期

因为是vue组件，所以生命周期和vue组件一样。生命周期钩子也是。