首页 > 其他分享 >Vue里面父组件嵌套子组件的生命周期

Vue里面父组件嵌套子组件的生命周期

时间:2022-10-12 00:45:43浏览次数:53  
标签:生命周期 里面 嵌套 Vue 组件 顺序

 

最常见的4种状态

1.Creation

2.Mounting

3.Updating

4.Unmouting

 

通常create用来放API的

如果是在Mount是挂载后操作DOM的

 

 

 

我们搞清楚他的生命周期顺序,父组件挂载在app

 

 

 

父组件里面嵌套子组件,父组件使用了v-if操作数据,事件切换按钮

 

 

 

 

 

重点,首先运行出来的顺序

 

 

 

 

 

 

 

下面看点击Toogle child按钮的效果

点击会导致父组件进入更新。

子组件为假(子组件有v-if),会进入到卸载阶段

 

 

 

 

 

 

 

建议:在嵌套组件的生命周期里面,返回浏览器并且跟踪执行顺序,生命周期不同的方法

 

标签:生命周期,里面,嵌套,Vue,组件,顺序
From: https://www.cnblogs.com/hechunfeng/p/16783112.html

相关文章

  • vue同时获取select的id和value
    <template><divclass="select1"><selectv-model="selectClassEnd"@change="selectClass($event)"><optionvalue="NONE">未选择</option><option......
  • vue中自己编写一个loader
    以一个解析pdf的loader为例首先在vue.config.js添加rule解析规则,1、test表示要解析的文件类型为pdf文件。2、use表示要使用的loader的位置,如果是通过npm安装的loader插......
  • 【精品】vue3中setup语法糖下通用的分页插件
    注意:本博客理论基础:https://blog.51cto.com/lianghecai/5743179效果自定义分页插件:PagePlugin.vue<scriptsetuplang="ts">//total:用来传递数据总条数//pageSize......
  • vue脚手架
    {path:"/user",name:"user",component:()=>import(xxx)}脚手架基于node的环境创建复杂vue项目的模板安装nodejs安装脚手架全局安装npmi-g@vue/cli检......
  • Java-Day05 while/do-while/多重嵌套例题/break/continue
    学习时间:2022/10/10-2022/10/11一、while循环1.结构:①初始化条件While(②循环条件[布尔类型]){③循环体;④迭代条件;}执行过程:①-②......
  • vue-router_学习笔记
    1.动态导入路由模块import{createRouter,createWebHashHistory,RouteRecordRaw}from"vue-router";//*导入所有routerconstmetaRouters=import.meta.glob(......
  • 好用的组件收藏
    播放器播放条斗鱼、Youtobe等https://web-streaming.github.io/ppbar/使用使用ppbar,需要导入ProgressBar类和ppbar的样式。importProgressBarfrom'ppbar';......
  • 前端面试总结15-vue高级特性
    1.自定义v-model:    2.$nextTick与refsVue是异步渲染,data改变后Dom不会立即渲染,$nextTick会在DOM渲染之后被触发,以获取最新的DOM节点refs用于获取dom节点 ......
  • 前端_vue3引入Element-plus
    element-plus官网:https://element-plus.gitee.io/zh-CN/component/button.html1、安装element-plusnpminstallelement-plus-D2、在index.js中导入element-plusim......
  • vue下载blob无法获取响应头里面的Content-Disposition来提取文件名 --导出完成代码
    exportClick(){//导出letpar={}downAxiosFile('/personnel/change/perUser/exportXls',par).then((res)=>{let{data}=res;......