uni-app 事件加载事件

- 日理万妓 2023-01-12 15:57 280阅读 0赞

<template>
    	<view>
    	<demo_test  v-if="flag"></demo_test> 
    		 <button type="primary"  v-on:click="checktest">切换test组件</button>
    	</view>
    </template>
    
    <script>
    	import test  from  "@/components/test/demo_test.vue"
    	  export  default{ 
    		  data(){ 
    			  return{ 
    				  flag:true
    			  }
    		  },
    		  onLoad(pages) { 
    		  	console.log("页面加载了 ，顺序2"+pages)
    		  },
    		  onShow() { 
    		  	console.log("页面显示了 ，顺序3")
    		  },
    		  onReady() { 
    		  	console.log("页面初次渲染完成了 ，顺序8");
    		  },
    		  onHide() { 
    		  	console.log("页面被隐藏了，顺序1");
    		  },
    		  methods:{ 
    			  checktest(){ 
    				  this.flag=false;
    			  }
    		  },
    		  components:{ 
    			  "demo_test":test
    		  }
    		  
    	  }
    </script>
    
    <style>
    </style>

组件页：

<template>
    	<view>
    		<view>
    			这是测试组件
    		</view>
    		 
    	</view>
    </template>
    
    <script>
    	export  default{ 
    		data(){ 
    			return{ 
    				name:"zhangsan"
    			}
    		},
    		beforeCreate() { 
    			console.log("实例已经开始初始化了,不能拿到数据 ，顺序4",this.name)
    		},
    		created() { 
    			console.log("初始化完成，可以拿到数据 ，顺序5",this.name)
    		},
    		beforeMount() { 
    			console.log("还未挂载，获取不了属性 ，顺序6");
    		},
    		mounted() { 
    			console.log("挂载完成，可以拿到属性 ，顺序7");
    		},
    		destroyed() { 
    			console.log("组件销毁");
    		},
    		methods:{ 
    			
    		}
    	}
    </script>
    
    <style>
    </style>

打印效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTkzMjE1Nw_size_16_color_FFFFFF_t_70]: /images/20221022/a0d99a3bdbee476182135fb9e0cb9158.png