开始学习Vue2(组件的生命周期和数据共享)

一、组件的生命周期

1. 生命周期 & 生命周期函数

生命周期Life Cycle)是指一个组件从创建 -> 运行 ->

销毁的整个阶段,强调的是一个时间段

生命周期函数:是由 vue 框架提供的内置函数,会伴随着

组件的生命周期, 自动按次序执行

注意:生命周期强调的是时间段生命周期函数调的是

间点

3. 生命周期图解

可以参考 vue 官方文档给出的生命周期图示 ,进一步理

解组件生命周期执行的过程:

Vue 实例 — Vue.js生命

周期图示

二、组件间的数据共享

1、组件间的关系

在项目开发中,组件之间的最常见的关系分为如下两种:

 父子关系

 兄弟关系

2、组件之间的数据共享

父子组件之间的数据共享又分为:

 -> 共享数据

 -> 共享数据

> 父组件向子组件共享数据需要使用自定义属性示例代码如下:

子组件向父组件共享数据使用自定义事件。示例代码如下:

兄弟组件之间的数据共享

vue2.x 中,兄弟组件之间数据共享的方案EventBus

EventBus 的使用步骤

① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象

② 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定

义事件

③ 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自

定义事件

练习:父将 list 数组传给子组件,子组件再将发生点击事件的

数组下标传给父组件,并且实现点击的数组元素背景颜色为黄绿色

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/647301.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java算法 leetcode简单刷题记录3

Java算法 leetcode简单刷题记录3 汇总区间&#xff1a; https://leetcode.cn/problems/summary-ranges/ 把数据按照是否连续分组输出 主要是 n<nums.length-1 && nums[n]1nums[n] 最多可以摧毁的敌人城堡&#xff1a; https://leetcode.cn/problems/maximum-enemy-…

必知的量化交易基础

量化交易核心概念 量化思想 量化交易 量化交易是指以先进的数学模型代替人为的主观判断&#xff0c;利用计算机技术从庞大的历史数据中海选能带来超额收益的多种“大概率”事件以制定策略&#xff0c;极大地减少了投资者情绪波动的影响&#xff0c;避免在市场极度狂热或悲观的…

对Git更深入了解与学习

对Git更深入了解与学习 0. 前言0.1 工作区与暂存区 1. git remote update origin2. git push origin --delete 分支名 删除远端分支3. git remote4. git fetch5. git status5.1 git status 直观理解5.2 暂存与暂存取消 &#xff08;git restore&#xff09;5.3 push之后 6. git…

网络与IO

netty https://www.cnblogs.com/nanaheidebk/p/11025362.html netty基础知识_netty和websocket区别-CSDN博客 Netty核心概念、架构及用法 - 知乎&#xff08;有图好理解&#xff09; IO java之NIO简介_nio java-CSDN博客 io、nio、tcp协议、socket、websocket、netty、to…

MySQL如何处理约束

MySQL允许您同时使用支持回滚的事务表和不支持回滚的非事务表。因此&#xff0c;MySQL中的约束处理与其他数据库管理系统有所不同。当在非事务表中插入或更新了大量行时&#xff0c;并且在发生错误时无法回滚更改时&#xff0c;我们必须处理这种情况。 基本理念是&#xff0c;…

SpringBootAdmin邮件通知

在上一篇中我们学习到了 Admin Service Clustering 分布式缓存配置 &#xff0c;这一篇我们来学习&#xff0c;客户端离线&#xff0c;出现故障的时候&#xff0c;我们这么能及时知道呢&#xff0c;发现邮件通知也许是最简单的方式了&#xff01; 邮件通知 邮件通知将作为使用…

数据结构 | 数组

数组是一种用连续空间存储相同数据类型的线性数据结构 为什么数组的索引从0开始&#xff0c;从1开始不行吗&#xff1f; 寻址公式是&#xff1a; 数组首地址 索引 * 数据类型占用的字节 从0开始性能更好&#xff0c;从1开始&#xff0c;cpu会多一个减法运算。 查找数据的时…

Linux文本编辑器-vi/vim

一.vi/vim编辑器介绍 vi\vim是visual interface的简称, 是Linux中最经典的文本编辑器 同图形化界面中的 文本编辑器一样&#xff0c;vi是命令行下对文本文件进行编辑的绝佳选择。 vim 是 vi 的加强版本&#xff0c;兼容 vi 的所有指令&#xff0c;不仅能编辑文本&#xff0c;而…

GBASE南大通用分享如何更新嵌套的集合

如果您想要更新集合的集合&#xff0c;则必须声明游标来访问外层的集合&#xff0c;然后声明嵌套的游标来 访问内层的集合。 例如&#xff0c;假设 manager 表有一附加的列 scores&#xff0c;它包含一其元素类型为整数的 MULTISET 的 LIST&#xff0c;如下图所示。 更新集合…

哈希的基本概念(开散列和闭散列)(附代码)

哈希 哈希概念哈希冲突哈希函数常见的哈希函数 哈希冲突的解决闭散列开散列 哈希概念 传统的查找函数&#xff0c;搜索的效率取决于比较的次数。而hash算法&#xff1a;在理想情况下&#xff0c;可以不经过任何比较&#xff0c;一次就能得到要搜索的结果。 存储结构&#xff1…

面向社交网络语言隐写分析

论文&#xff1a;Linguistic Steganalysis Toward Social Network 发表在&#xff1a;IEEE Transactions on Information Forensics & Security是网络与信息安全领域的国际两大顶级期刊之一&#xff0c;中国计算机学会&#xff08;CCF&#xff09;推荐的A类期刊&#xff0c…

​用技术的视角,去看一台家用 MPV 该有的水准

「MPV」一个在 2023 年之前都属于「小众」车型的品类。 但从 2023 年初开始&#xff0c;MPV 却变成了新能源&#xff0c;特别是高端新能源品牌必争的细分产品。 从岚图推梦想家开始&#xff0c;到腾势 D9&#xff0c;再到极氪 009&#xff0c;最后到魏牌高山&#xff0c;标志…

【开源】基于JAVA语言的智慧社区业务综合平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 业务类型模块2.2 基础业务模块2.3 预约业务模块2.4 反馈管理模块2.5 社区新闻模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 业务类型表3.2.2 基础业务表3.2.3 预约业务表3.2.4 反馈表3.2.5 社区新闻表 四、系统展…

Java中的this和super

①this 在Java中&#xff0c;this关键字代表当前对象的引用。它可以用于以下几个方面&#xff1a; 引用当前对象的成员变量&#xff1a;使用this关键字可以引用当前对象的成员变量&#xff0c;以区分成员变量和方法参数或局部变量之间的命名冲突。例如&#xff0c;如果一个方法…

C++学习笔记--运算符

运算符 作用&#xff1a;用于执行代码的运算 运算符的类型 1、算术运算符 作用&#xff1a;处理四则运算 2、赋值运算符 作用&#xff1a;用于将表达式的值赋给变量 3、比较运算符 作用&#xff1a;用于表达式的比较&#xff0c;并返回一个真值或阙值 4、逻辑运算符…

LeetCode做题总结 226. 翻转二叉树

226. 翻转二叉树 代码1 报错代码2 报错代码3 正确。 代码1 报错 class Solution {public TreeNode invertTree(TreeNode root) {// TreeNode _root root; // 这是在保证// _root preOrderTree(root);// return root;root preOrderTree(root);return root;}public TreeNode …

【机器学习300问】15、什么是逻辑回归模型?

一、逻辑回归模型是为了解决什么问题&#xff1f; 逻辑回归&#xff08;Logistic Regression&#xff09;是一种广义线性回归分析模型&#xff0c;尤其适用于解决二分类问题&#xff08;输出为两个类别&#xff09;。 &#xff08;1&#xff09;二分类举例 邮件过滤&#xff…

Java Web(五)--DOM

介绍 DOM 全称是 Document Object Model 文档对象模型&#xff1b; DOM 是 W3C&#xff08;万维网联盟&#xff09;的标准。 DOM 定义了访问 HTML 和 XML 文档的标准&#xff1a; "W3C 文档对象模型 &#xff08;DOM&#xff09; 是中立于平台和语言的接口&#xff0…

pdf怎么转换成jpg图片?pdf转图片工具用它就够了

有时候&#xff0c;我们可能需要将pdf文档转换为图片格式&#xff0c;以便于文档的处理和管理。通过将pdf转换为图片&#xff0c;可以将每一页pdf转换为独立的图片文件&#xff0c;便于整理、存储和管理&#xff0c;如果您有多个PDF文件需要转换成图片&#xff0c;可以批量pdf转…

Modern C++ std::bind的实现原理

1. 前言 前面写过《std::function从实践到原理》&#xff0c;管中规豹了std::function的一点点原理&#xff0c;不过还有一个与std::function密切相关的函数std::bind, 允许编程者绑定几个参数&#xff0c;本文着重介绍它的实现原理。不介绍一下它&#xff0c;有点吃肉不吃蒜味…