组件传参与Vue生命周期

最新推荐文章于 2025-12-17 14:07:30 发布
原创 最新推荐文章于 2025-12-17 14:07:30 发布 · 286 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了Vue组件间的传参技巧，如props和$emit的使用，以及Vue的八个关键生命周期阶段：创建前后的beforeCreate和created，挂载前后的beforeMount和mounted，更新前后的beforeUpdate和updated，以及销毁前后的beforeDestroy和destroyed。重点讲解了如何在这些阶段进行数据操作和视图更新。

一.组件传参

定义与使用

App.vue
01  导入
import CounterCom from './components/CounterCom.vue'

02 注册
components:{CounterCom}

03 使用
<CounterCom></CounterCom>

父传子

使用props

父传给子的数组是只读的(做默认值,读取显示)不能进行修改

App.vue文件中
<CounterCom :num="10">

CounterCom.vue 组件中
01 接收参数并定义默认值

props:{
    "num":{type:Number,default:1}
}


02 使用参数num

data(){
    return {counter:this.num}
}

子传父

使用的事件 $emit

CounterCom.vue
<button @click="counter++; $emit('counterchange',counter)">

App.vue
<CounterCom @counterchange="n=$event">

$emit(事件名,事件值)  发送一次事件,事件名(counterchange)和事件值(counter) 是自定义的

$event 固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)

二.Vue生命周期

Vue生命周期有八个并且分为四类

(🚩为特别声明 ✳ 为重要)

1.创建前后

beforeCreate 创建前
特点:有this,没有data与methods方法

created创建后（✳）
特点:有data,没有$el,dom节点
🚩用处:ajax请求,定时器,事件监听

2.挂载前后

beforeMount 挂载前
特点:有$el ,数据没有渲染

mounted挂载后（✳）
特点:有dom节点,数据也渲染
🚩用处:操作节点,ajax请求

3.更新前后

beforeUpdate更新前
特点: 会执行多次，数据更新,dom节点没有更新

updated 更新完毕
特点: 会执行多次，数据更新,dom节点也更新

4.销毁前后

✳ beforeDestroy 销毁前
特点:数据可以更新,视图已经不更新
🚩用处:移除事件监听,停止定时器

destroyed 销毁完毕
特点:没有this,切换视图与vue实例的联系

vue生命周期
m0_67316947的博客
07-27 1316
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模、Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
Vue生命周期“偷听术“
m0_72030584的博客
05-26 691
@hook：Vue生命周期"偷听术"
vue中的生命周期
IT12345666的博客
05-22 626
生命周期总览 1. beforeCreate 当前生命周期是在vue实例对象创建之前的状态，此时 data ， props， method 中的参数或者方法都不能使用 在beforeCreate中没有找到参数 XXX 的定义 beforeCreate(){ // 打印 props console.log(this.v1); // 打印 data console.log(this.v2); // 执行方法 this.show(); } 2.created 而在此状态，我们就可以去使用一些方法来使
vue的生命周期和组件传值
tangyu520lehua的博客
11-10 654
vue的生命周期和组件传值
vue组件传值与生命周期钩子
dream_of_forget的博客
09-20 1060
使用步骤第一步：给子组件添加props属性（与data平级）作用：类似于声明变量，定义要接收的属性名第二组：在父组件中使用行内自定义 attribute传值注意点： prop中的属性不能有大写字母，不要使用驼峰命名。建议使用-作为分隔符。原因：行内自定义属性attribute不支持大写父子propsdataprops父组件App.vue1.组件本质相当于一个自定义标签，也支持v-for列表渲染2.组件语法要求很严格：v-for。
vue的生命周期及组件之间的传值
qq_975443629的博客
03-23 1028
一、实例生命周期钩子 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 不同的钩子函数在实例生命周期的不同阶段被调用，如有beforeCreate、created、beforeMount、mounted、be...
vue组件传参与vue的生命周期
qq_58957340的博客
07-28 408
特点会执行多次数据更新，dom节点没有更新。特点有this，没有data与methods。特点有data，没有$el,dom节点。特点会执行多次数据更新，dom节点也更新。每个组件从创建到销毁都会经历一系列特定的过程,称为生命周期。特点没有this，切换视图与vue实例。用处ajax请求，定时器，事件监听。特点有dom节点，数据也渲染。或特点有$el，数据没有渲染。用处操作节点，ajax请求。创建后发起ajax请求。...
Vue中的组件传参与生命周期
zifeiyu3697的博客
07-27 425
一.定义与使用01导入02注册components03使用二.父传子使用props父传给子的数组是只读的(做默认值,读取显示)不能进行修改App.vue文件中num="10">CounterCom.vue组件中//01接收参数并定义默认值props{"num"{type1}}//02使用参数numdata(){this.num}}三.子传父使用的事件$emit。...
《Vue从入门到精通：前端开发的基石之旅》，涵盖Vue简介、环境搭建、基础语法、组件化开发及生命周期详解
07-03
内容概要：本文全面介绍了 Vue.js 从入门到精通的关键知识点，涵盖 Vue 的核心概念、环境搭建、基础语法、组件化开发、生命周期和常用指令等内容。Vue 作为一个渐进式 JavaScript 框架，核心库仅关注视图层，易于...
基于Vue的建筑工程全生命周期一体化工程管理平台设计源码
10-05
该平台通过运用Vue.js框架和多种技术文件的综合运用，构建了一个全面覆盖建筑工程全生命周期的信息化管理平台，大大提升了建筑行业的项目管理效率和质量，为建筑工程的各个参与方提供了一个高效、便捷的管理工具。
【Vue3实践】（五）Vue3中的生命周期函数、组合式函数的使用
积木成林，聚沙成塔
03-24 2659
本篇主要讲了生命周期函数、组合式函数需要关注以下几点： - 生命周期函数： - 生命周期分为4个阶段：创建、挂载、更新、销毁 - 最常用的钩子函数是`created`和`mounted` - Vue3中`onMounted`处理挂载阶段的钩子函数，通过`setup`处理创建阶段 - 组合式函数： - 是使用Vue的组合式API封装的函数 - 与普通函数的区别在于，组合式函数**有状态**，即这个函数中会定义**响应式变量**，参与到组件的生命周期中
ArkTs的UI装饰器（自定义组件生命周期、页面组件生命周期、所有UI装饰器使用及示例）
AIWWY的博客
04-04 1138
组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。onDidBuild：组件build()函数执行完成之后回调该接口，开发者可以在这个阶段进行埋点数据上报等不影响实际UI的功能。不建议在onDidBuild函数中更改状态变量、使用animateTo等功能，这可能会导致不稳定的UI表现。：aboutToDisappear函数在自定义组件析构销毁之前执行。
vue生命周期-组件参数传递
weixin_43862923的博客
03-13 617
vue生命周期 --------------学习记录 beforeCreate():实例在内存中被创建出来，还没有初始化好data和methods属性。 create():实例已经在内存中创建，已经初始化好data和method，此时还没有开始编译模板。 beforeMount():已经完成了模板的编译，还没有挂载到页面中。 mounted()：将编译好的模板挂载到页面指定的容器中显示。 befo...
Vue的生命周期和组件传参
m0_64520243的博客
07-27 438
Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。
商城后台管理系统 02 添加规格参数-动态表单
weixin_52943021的博客
12-15 243
Boolean。
【无标题】实战：Vue3 + Element Plus 实现树形选择器全量预加载与层级控制
最新发布
weixin_43699654的博客
12-17 448
本文实现的「树形选择器全量预加载」方案
Vue 组件解耦实践：用回调函数模式替代枚举类型传递
鹏北海的博客
12-12 430
本文通过一个登录模块重构案例，介绍了使用回调函数模式解耦Vue组件的方法。原有实现中父组件依赖子组件的枚举类型来判断操作来源，导致代码耦合度高、扩展性差。重构后子组件将后续操作封装为回调函数保存，父组件只需在协议确认后通知子组件执行回调，无需了解具体操作细节。这种模式降低了组件耦合度，提高了代码可维护性和扩展性，适用于异步确认流程、多入口单出口等场景。文章还对比了两种方案的优劣，并强调了组件职责单一的重要性。
【vue2form表单中的动态表单校验】
weixin_46252229的博客
12-15 236
【代码】【vue2form表单中的动态表单校验】
商城后台管理系统 03 规格参数配置
weixin_52943021的博客
12-15 182
【代码】商城后台管理系统 03 规格参数配置。
vue2 生命周期
03-20
### Vue 2 生命周期详解 #### 初始化阶段 在 `new Vue()` 被调用后，Vue 实例进入初始化阶段。此阶段主要完成数据观测 (data observer)，属性和方法的代理，事件/计算属性的初始化等工作[^1]。这一阶段的核心目标是准备所有的基础配置，使得后续的操作能够顺利进行。 #### 模板编译阶段 在此阶段，Vue 将模板解析成渲染函数。如果提供了 `template` 属性，则会将其转换为虚拟 DOM 渲染函数；如果没有提供 `template` 或者使用的是单文件组件（`.vue` 文件），则会通过 `.render` 函数来定义如何渲染视图[^4]。这个阶段还涉及指令绑定、插值表达式的处理以及一些静态节点标记优化的工作。 #### 挂载阶段 当存在 `el` 参数时，Vue 自动将实例挂载到指定的 DOM 元素上并启动首次渲染流程。如果未设置 `el`，可以通过手动调用 `$mount()` 方法实现动态挂载。在这个过程中，Vue 执行以下操作： - 创建根节点对应的 VNode； - 使用真实 DOM 替换掉占位符或者插入新内容； - 触发一系列与挂载相关的生命周期钩子如 `beforeMount` 和 `mounted`。 #### 更新阶段 每当响应式依赖发生变化时触发重新渲染逻辑，即所谓的“更新”。该阶段的关键在于比较旧VNodes树结构同新的版本之间的差异，并仅针对变动部分作出最小化调整以提高性能效率。涉及到的主要生命周期回调有 `beforeUpdate` 及 `updated`[^3]。 #### 销毁阶段 当一个组件被移除或替换时进入到销毁状态，在这期间它不会再参与任何进一步的数据变化通知机制里去影响其他地方的状态同步情况。具体行为包括清理所有监听器、解绑自定义事件处理器、停止计时器等资源释放动作。相关联的重要钩子函数为 `beforeDestroy` 和 `destroyed`[^2]。 以下是基于上述描述的一个简单示例展示如何利用这些不同周期内的特性： ```javascript // 定义一个简单的 Vue 组件 var vm = new Vue({ el: '#app', data: { message: 'Hello!' }, beforeCreate() { console.log('beforeCreate'); }, // 在实例初始化之后立即调用 created() { console.log('created'); }, // 当实例已经完成了选项的处理、观察者的创建以及其他内部初始化工作后调用 beforeMount() { console.log('beforeMount'); }, // 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted() { this.timerId = setInterval(() => {this.message += '.';}, 1000); console.log('mounted'); }, // 此处可以访问真实的DOM元素 beforeUpdate() { console.log('beforeUpdate'); },// 数据更新前发生 updated() { console.log('updated'); }, // 响应式数据改变导致界面重绘完成后调用 beforeDestroy() { clearInterval(this.timerId);console.log('beforeDestroy');}, // 即将销毁实例之前的最后一个机会做些事情比如清除定时器 destroyed() { console.log('destroyed'); } // 实例已被完全销毁后的最终状态报告 }); setTimeout(function(){vm.$destroy();},5000); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值