【vue组件之间的数据传递和组件的生命周期】一.组件之间的通信;二.组件的声明周期

news2024/11/23 13:21:41

目录

一.组件之间的通信

1.组件之间的关系:父子关系、兄弟关系、跨级关系

2.父子组件之间的通信(数据传递):

(1)父组件----》子组件:使用props

(2)子组件----》父组件:使用$emit

3.兄弟组件之间的通信(数据传输):

(1)使用Vue的状态管理器Vuex:建议在大型项目中使用

(2)使用第三方的模块:mitt(数据总线方式),创建一个事件中心,由它来进行事件的监听、触发,在这个过程中实现任意组件之间的通信

4.跨级组件之间的通信:provide/inject类似于消息的订阅和发布。provide提供或发送数据,inject接收数据。

(1)provide(name,value):函数接收两个参数

(2)inject(name,default):函数有两个参数

二.组件的声明周期

1.什么是组件的生命周期?

2.生命周期函数:由Vue提供的内置函数,伴随组件的生命周期按次序自动运行 ---- 钩子函数

3.生命周期的阶段划分:


一.组件之间的通信

1.组件之间的关系:父子关系、兄弟关系、跨级关系

2.父子组件之间的通信(数据传递):

(1)父组件----》子组件:使用props

        A.第一步:在父组件中使用子组件时,给子组件绑定属性

        B.第二步:在子组件中使用props接收绑定的属性值

(2)子组件----》父组件:使用$emit

        A.第一步:在子组件中通过$emit触发指定的事件,同时传值

        B.第二步:在父组件中给子组件监听事件,同时接收子组件传来的值

3.兄弟组件之间的通信(数据传输):

(1)使用Vue的状态管理器Vuex:建议在大型项目中使用

(2)使用第三方的模块:mitt(数据总线方式),创建一个事件中心,由它来进行事件的监听、触发,在这个过程中实现任意组件之间的通信

        A.第一步:安装

        npm install mitt

        B.第二步:创建事件中心(event.js)

//导入mitt库
import mitt from "mitt"
//创建事件触发器
const emitter = mitt()
//导出事件触发器
export default emitter

        C.第三步:创建组件,在组件中使用事件触发器,触发事件的同时发送数据

        D.第四步:接收数据

强调:A组件和B组件是兄弟组件

(1)on('事件名',callback):事件的监听,一旦监听的事件被触发,说明兄弟组件在传递数据,callback用来接收数据

(2)emit('事件名',data):事件触发。触发事件即告诉兄弟组件要传数据了,data中就是要传递的数据

A组件监听的事件名必须与B组件触发的事件名相同

4.跨级组件之间的通信:provide/inject类似于消息的订阅和发布。provide提供或发送数据,inject接收数据。

(1)provide(name,value):函数接收两个参数

        name:定义提供的property的name

        value:property的值。

(2)inject(name,default):函数有两个参数

        name:接收provide提供的属性名

        default:设置默认值,可以不写,是可选参数

Vue2.0的实现方式

QianLong.vue

//QianLong.vue
<template>
  <div>
    <h2>孙子:乾隆</h2>
    <div>爷爷:{{ getYeYeData }}</div>
  </div>
</template>
<script>
export default {
  name: "QianLong",
  inject:['LastWords'],
  computed: {
    getYeYeData(){
      return this.LastWords()
    }
  }
}
</script>

YongZheng.vue

//YongZheng.vue
<template>
  <div>
    <h2>儿子:雍正</h2>
    <div>父亲:{{ getFatherData }}</div>
    <hr/>
    <QianLong />
  </div>
</template>
<script>
import QianLong from "@/components/QianLong";
export default {
  name: "YongZheng",
  components:{
    QianLong
  },
  inject: ['LastWords'],
  computed: {
    getFatherData(){
      return this.LastWords()
    }
  }
}
</script>

KangXi.vue

//KangXi.vue
<template>
   <div>
     <h2>康熙:{{ lastWords }}</h2>
     <hr/>
     <YongZheng />
   </div>
</template>
<script>
import YongZheng from "@/components/YongZheng";
export default {
  name: "KangXi",
  data(){
    return {
      lastWords: '整顿吏治'
    }
  },
  components: {
    YongZheng
  },
  provide:function (){
    return {
      LastWords: ()=> this.lastWords
    }
  }
}
</script>

 

 总结:

(1)父子关系:父传子通过props,子传父通过$emit触发事件

(2)兄弟关系:vuex(状态管理器)、mitt(第三方库,通过事件总线--传数据的一方触发事件,接收数据的一方监听事件)

(3)跨级关系:vuex(状态管理器)、mitt、provide/inject

二.组件的声明周期

1.什么是组件的生命周期?

指一个组件从   创建---》运行---》销毁   的过程,强调的是一个时间段

2.生命周期函数:由Vue提供的内置函数,伴随组件的生命周期按次序自动运行 ---- 钩子函数

3.生命周期的阶段划分:

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

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

相关文章

为什么互联网公司不欢迎中年人?

除开几个“越老越值钱”的岗位&#xff08;如医生、教师、建筑师&#xff09;外&#xff0c;大多数公司就是不欢迎中年人的。 你很难见到30岁的地推、40岁的销售、50岁的文员&#xff0c;但是20岁的年轻小伙一抓一大把&#xff0c;我们的互联网经济&#xff0c;就是建立在人口密…

RHEC——ansible配置yum源仓库

1.挂载本地光盘到/mnt 2.配置yum源仓库文件通过多种方式实现 1&#xff09;、仓库1 &#xff1a; Name: RH294_Base Description&#xff1a; RH294 base software Base urt: file:///mnt/BaseOS 不需要验证钦件包 GPG 签名 启用此软件仓库 2&#xff09;、仓库 2: Name: RH29…

立创eda专业版学习笔记(1)

之前那些博客对应的是立创eda标准版&#xff0c;版本号是6.5.4以前 最近开始使用专业版&#xff0c;原本以为专业版是标准版的基础上添加了些功能&#xff0c;现在才发现不是这么回事&#xff0c;专业版跟标准版在界面上的区别很大&#xff0c;几乎就是另外一个软件了&#xff…

外贸客户接待的基本环节有哪些?

外贸客户来了&#xff0c;接待人员一定要有耐心&#xff0c;那么怎么接待呢&#xff1f;以下是米贸搜为您整理的外贸客户接待流程。希望对你有帮助。外贸客户接待流程既然客人愿意来我们公司参观&#xff0c;他们一定有很大的诚意。但从这几年的案例来看&#xff0c;大部分来访…

JavaSE学习day1_01,计算机基础知识

学习正式开始&#xff1a; 学习之前先了解一些计算机基本常识&#xff1a; 1. CMD 1.1 什么是CMD&#xff1f; 先看一张图&#xff1a; 这是黑客大佬使用的命令。 这是现代计算机的图形化界面。学过操作系统的同学应该知道这是操作系统提供的一个接口&#xff0c;它严格意义…

ORB-SLAM2 --- KeyFrame::SetBadFlag函数

目录 1.函数作用 2.code 3.函数解析 1.函数作用 真正地执行删除关键帧的操作。 需要删除的是该关键帧和其他所有帧、地图点之间的连接关系。 2.code void KeyFrame::SetBadFlag() { // Step 1 首先处理一下删除不了的特殊情况{unique_lock<mutex> lock(mMutexConn…

visual studio控制台中文乱码问题

踩坑经历&#xff1a; 这是一个向文件中写入文字&#xff08;中文&#xff0c;在将文件中文字读取出来的代码。读取出来的结果是符号码。 这个问题在网上找了很多的解决办法&#xff0c;都没有完全解决。 其实要不出现乱码&#xff0c;就要保持控制台编码和源代码编码相一致就可…

照片恢复软件哪个好用?5个好用的照片恢复软件推荐

照片可以勾起回忆&#xff0c;让我们想起与最亲近的人一起度过的时光&#xff0c;这就是为什么仅仅丢失一张重要照片就会让人感觉完全毁灭性的——几乎就像你失去了记忆本身一样。好消息是&#xff0c;大多数丢失或意外删除的照片都可以使用照片恢复软件恢复&#xff0c;而且我…

XILLINX时钟约束相关说明

时钟说明 primary clock 基准时钟&#xff0c;primary这里有“基本的”更贴切&#xff0c;虽然其有“主要的、首要的、初级的、原发性的”意思。 提供的基准时钟有俩种情况&#xff1a; 时钟由外部时钟源提供&#xff0c;通过输入引脚进入FPGA&#xff1b;高速收发器(GT)的时…

Google编程规范

Google编程规范总结一、前言二、头文件三、类构造函数可拷贝类型和可移动类型struct和class接口存取控制和声明顺序四、来自Google的奇技所有权与智能指针cpplint五、其他C特性六、命名约定(重点)七、注释(重点)八、代码格式(重点)九、结束语一、前言 昨天听了雷军的演讲&#…

猪齿鱼知识沉淀

数据源知识沉淀 1、下拉框与Lov的注意点&#xff1a; 下拉框 {name: intertradeType,lookupCode: "HCMS.INTERTRADE_TYPE",label: intl.get(${prefix}.table.intertradeType).d(贸易性质),required: true, }, {name: intertradeTypeMeaning,label: intl.get(${pref…

2023 docker安装gitlab-ce

公司搭建私服git来管理代码。这里使用docker来安装gitlab&#xff0c;过程相对简单。需要服务器至少有4g内存。这里安装的gitlab-ce社区版。前提是安装了docker 安装gitlab-ce 下载镜像&#xff0c;等待下载… docker pull gitlab/gitlab-ce:latest建立了目录 /opt/docker/git…

基础知识一览

这里写目录标题1.类1.1 类和对象的关系1.2 构造函数1.2.1 概念1.2.1.1 修饰符1.2.1.2 返回值类型1.2.1.3 函数名1.2.1.4 参数列表1.2.1.5 return语句1.2.1.6 扩展2.继承2.1 继承的好处和限制2.2 子父类中定义了一模一样的成员变量1.类 1.1 类和对象的关系 类是对象的抽象,对象…

利用宝塔配置jdk环境

首先&#xff0c;下载linux对应版本jdk(注意是Linux版本)&#xff0c;然后通过宝塔传到服务器上。选择相应的jdk文件&#xff0c;将其从本机上传到服务器上的对应文件夹。 上传后可以看到对应如下&#xff1a; 然后将其解压到对应的目录下&#xff0c;使用如下命令&#xff1…

使用Jmeter轻松实现AES加密测试

大家在自己公司做接口测试的时候&#xff0c;有没有遇到过接口做加密处理的情况呢&#xff1f;相信我们的读者朋友们都有一定的概率会遇到这种情况&#xff0c;尤其是对接口数据安全有一定要求的公司接口数据一定会做加密处理。那么遇到加密情况&#xff0c;大家使用工具JMeter…

CAD快速看图怎么转换成PDF格式?这一款软件就足够

CAD快速看图怎么转换成PDF格式&#xff1f;CAD文件是一种比较专业的文件&#xff0c;一般用于设计、绘图等&#xff0c;这种文件需要特殊的软件才可以打开&#xff0c;不过对于大多数人来说&#xff0c;都很少会安装这种软件&#xff0c;因为下载和安装软件需要很多时间&#x…

【计算机视觉】OpenCV 4高级编程与项目实战(Python版)【2】:操作像素

像素是构成图像的基本单位。现在看图1所示的花卉图像,这幅图看着很细腻,不过将图像的白框区域放大,会看到如图2所示的效果,细腻的图像不见了,取而代之的是一个一个的小方块,每一个小方块就是一个像素。 图6 花卉 图7 放大的花卉局部

分库分表解决方案

前言 因为每个学校学生用餐人数太多&#xff0c;一天订单20万量增长&#xff0c;而且学校使用也在不停的增多&#xff0c;公司最近在搞分库分表&#xff0c;数据分离到不同的库中或表中&#xff0c; 所以这段时间了解过数据库的分库分表&#xff0c;也读过很多大神写的博文&…

elasticsearch 7.9.3知识归纳整理(五)之es的索引生命周期管理

es的索引生命周期管理 一、常见概念及命令 1.1、概念 ILM定义了四个生命周期阶段&#xff1a; Hot&#xff1a;正在积极地更新和查询索引。 Warm&#xff1a;不再更新索引&#xff0c;但仍在查询。 cold&#xff1a;不再更新索引&#xff0c;很少查询。信息仍然需要可搜索&…

【蓝桥杯基础题】2021年省赛填空题—卡片

&#x1f451;专栏内容&#xff1a;蓝桥杯刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录一、题目背景二、题目描述三、题目分析1.检查思路2.思路优化四、代码汇总1.C语言代码2. C代码3.运行结果五、总结1.枚举思…