admin 管理员组

文章数量: 1184232


2023年12月16日发(作者：socket10054)

vue 父子组件的mounted执行顺序

【原创版】

目录

父子组件的概念

d 生命周期钩子的作用

父子组件的 mounted 执行顺序

4.实际案例演示

5.总结

正文

一、Vue 父子组件的概念

在 中，我们经常需要使用一个组件嵌套另一个组件，形成父子组件的关系。父组件包含子组件，子组件需要依赖父组件的数据和方法，这种关系被称为父子组件关系。

二、mounted 生命周期钩子的作用

Vue 组件的生命周期分为几种，其中 mounted 是其中一种。当组件被插入到 DOM 树中，完成模板编译、数据绑定、watcher 初始化等一系列操作后，就会触发 mounted 钩子。这时，组件已经可以正常使用了。

三、Vue 父子组件的 mounted 执行顺序

当父子组件同时存在时，它们的 mounted 钩子执行顺序是怎样的呢？答案是：子组件的 mounted 会在父组件的 mounted 之后执行。这是因为子组件需要依赖父组件的数据和方法，如果父组件还没有完成 mounted，子组件就无法正常工作。

四、实际案例演示

下面是一个简单的父子组件示例：

第 1 页 共 4 页

父组件：

```html

```

子组件：

第 2 页 共 4 页

```html

```

在这个例子中，当父组件完成 mounted 后，子组件才会执行 mounted。在控制台中，我们可以看到子组件的 mounted 日志是在父组件的

mounted 之后打印的。

五、总结

第 3 页 共 4 页

Vue 父子组件的 mounted 执行顺序是：子组件的 mounted 在父组件的 mounted 之后执行。

第 4 页 共 4 页


本文标签： 组件 父子 关系 数据 钩子

版权声明：本文标题：vue 父子组件的mounted执行顺序 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1702718309a427943.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。