admin 管理员组

文章数量: 887007

uniapp中组件生命周期

组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期
父组件代码

<template><view>接收上一个页面的参数id{{id}}和age{{age}}<test v-if="flag"></test><button type="primary" @click="change">test组件切换</button></view>
</template><script>import test from '@/components/test.vue'export default {data() {return {id:'',age:'',flag: true}},onLoad(options) {this.id = options.id;this.age = options.age;console.log(options);},components:{test},methods: {change(){this.flag = !this.flag;}}}
</script><style></style>

子组件代码

<template><view>这是test组件</view>
</template><script>export default {name:"test",data() {return {num:3,intId:''};},beforeCreate(){//在实例初始化之前被调用console.log("beforeCreate", this.num)},created(){//在实例创建完成后被立即调用console.log("created", this.num)this.intId = setInterval(()=>{console.log("执行定时器")},1000)},beforeMount(){//在挂载开始之前被调用console.log("beforeMount", this.num)},mounted(){//挂载到实例上去之后调用。console.log("mounted", this.num)},destroyed(){//Vue 实例销毁后调用console.log("组件销毁")clearInterval(this.intId);}}
</script><style></style>

效果图


官方文档.html#componentlifecycle

本文标签： uniapp中组件生命周期

版权声明：本文标题：uniapp中组件生命周期 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732352341h1533450.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。