vue中的侦听器和组件之间的通信

目录

一、侦听器

监听基本数据类型:

监听引用数据类型:

计算属性和watch区别?

二、组件通信/传值方式

1.父子组件传值

    父组件给子组件传值:

      (1)props

      (2)provide inject

      (3)事件总线 $emit 和 $on vue实例调用方法 

    子组件给父组件传值:

    (1)事件总线 $emit 和 $on vue实例调用方法 

  2.兄弟组件传值/通信

    (1)利用事件总线 

    (2)vuex  

  3.祖先后代组件传值/通信

      (1)provide inject


一、侦听器

只有监听数据发生改变才会触发侦听器 

监听基本数据类型:

通过下面这个小案例来学习,通过监听a和b的值,来实现计算求和的功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><!-- number修饰符 可以让双向数据绑定的值变为number类型 -->a:<input type="text" v-model.number="a"><br>+<br>b:<input type="text" v-model.number="b"><br>=<br><output>{{total}}</output></div><script>let vm = new Vue({// 与模板绑定el:"#app",// 数据模型 存放vue变量data:{a:0,b:0,total:0,name:"",obj:{}},// 存放方法和事件处理程序methods: {},computed:{// total(){//     return Number(this.a) + Number(this.b)// }},// 侦听器 监听器  什么时候触发? 只有数据发生变化才会触发watch:{a(newValue,oldValue){// console.log(newValue,oldValue);this.total = newValue + this.b},b(newValue,oldValue){// console.log(newValue,oldValue);this.total = this.a + newValue}}});</script>
</body>
</html>

浏览器运行结果如下:

 


监听引用数据类型:

当侦听器在监听引用数据类型时存在监听不到的问题,这时我们就需要开启深度监听

params:{handler(n,o){this.getArticle();},//开启深度监听deep:true}}

计算属性和watch区别?

  1.计算属性有缓存性,响应式依赖不发生改变,多次调用计算属性会返回之前得计算结果。
  2.watch无缓存性,只有数据发生改变侦听器才会执行。
  3.watch侦听器一般用于异步操作或者开销较大得操作。
  4.计算属性默认可读,设置setter就可修改。

二、组件通信/传值方式

1.父子组件传值
    父组件给子组件传值:
      (1)props

      1.在子组件标签中写入父组件传递数据 向下传递prop
      2.在子组件内声明props选项接收父组件传递的数据 props:['','','']

    <!-- 动态传递 传递的变量 使用v-bind绑定 --><Header :msg="msg"></Header><!-- 静态传递 --><Header title="我是父组件中title"></Header><!-- 3.传递其他数据类型 除字符串外 传递数组对象number布尔值 动态传参 --><Header :arr="[1,2,3,4]" :obj="{name:'zhangsan'}" :bool="true" :age="20"></Header>
    // 子组件使用props接收父组件传递的数据props:['msg'],props:['title'],props: ['msg', 'age', 'bool', 'arr', 'obj'],

      (2)provide inject

      1.父组件使用provide提供传递数据或者方法(与methods同级)
      2.子组件使用inject注入传递的数据或者方法

  // 注入传递给后代组件的数据或者方法provide(){return{parent:this.parent,parentSend:this.parentSend,attr:this.attr}}
}
    // 使用provide传递的数据方法使用inject注入  后代组件注入祖先组件传递数据和方法inject: ['parent', 'parentSend'],

      (3)事件总线 $emit 和 $on vue实例调用方法 

      1.新建event.js 
        import Vue from 'vue';
        export default new Vue();

// 定义事件总线 导出vue实例对象
import Vue from "vue";
export default new Vue();


      2.在父组件中使用$emit发射自定义事件同时传递参数
      import Bus from './event.js'
      Bus.$emit('自定义事件名称',传递数据)

    <!-- 3.第三种传值方式 --><button @click="handler">发射数据给header子组件</button>
    handler(){// $emit() 发射自定义事件 参数(自定义事件名称 传递的参数)Bus.$emit('toHeader',this.pMsg,'hello world')},


      3.在子组件内部使用$on监听自定义事件同时接收参数
      Bus.$on('自定义事件名称',(a,b)=>{

      })

        // $on监听$emit自定义事件 参数(自定义事件名称,()=>{})Bus.$on('toHeader', (a, b) => {console.log(a, b);this.a = a;this.b = b;})

    子组件给父组件传值:
    (1)事件总线 $emit 和 $on vue实例调用方法 

      1.发射自定义事件给父组件同时传递数据
      this.$emit('toParent',this.footer);
      2.在父组件模板中(在子组件标签上)声明自定义事件 
      <Footer @toParent='事件处理程序'></Footer>
      事件处理程序(接收子组件传递的数据){

      }

        和父给子传的第三种方式一样

  2.兄弟组件传值/通信
    (1)利用事件总线 

    1.定义事件总线 新建xxx.js
        import Vue from 'vue';
        export default new Vue();
    2.在一个兄弟组件中引入事件总线 
      import Bus from './event.js'
      使用Bus.$emit('自定义事件名称',传递的数据)
    3.在另一个兄弟组件中引入事件总线
      import Bus from './event.js'
      使用Bus.$on('emit发射自定义事件名称',(a,b)=>{
        
      })监听发射自定义事件 同时接收数据

        同父给子传的第三种方式


    (2)vuex  

        关于vuex后续文章会详细说明,父子组件、兄弟组件、无关系组件任意组件之间的传值。

        Vuex本质上也是一种本地存储,比localStorage的单纯值传递多了方法、属性、异步方法等功能。但是因为是将内容本地化,所以就会被在浏览器中获取到。

  3.祖先后代组件传值/通信
      (1)provide inject

        同父给子传的第二种方式

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

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

相关文章

玩转大数据20:大数据应用容器化与部署实践

一、容器化技术介绍和优势 随着云计算的快速发展&#xff0c;容器化技术作为一种轻量级虚拟化技术&#xff0c;已经成为应用部署的主要方式。容器化技术通过共享操作系统&#xff0c;将应用程序及其依赖项打包成一个独立的、可移植的容器&#xff0c;从而实现应用的快速部署和…

Android Studio: 解决Gradle sync failed 错误

文章目录 1. 前言2. 错误情况3. 解决办法3.1 获取gradle下载地址3.2 获取gradle存放目录3.3 替换并删除临时文件3.4 触发Try Again 4. 执行成功 1. 前言 今天调试项目&#xff0c;发现新装的AS&#xff0c;在下载gradle的过程中&#xff0c;一直显示连接失败&#xff0c;Gradl…

构建陪诊预约系统:技术实战指南

在医疗科技的飞速发展中&#xff0c;陪诊预约系统的应用为患者和陪诊人员提供了更为便捷和贴心的服务。本文将带领您通过技术实现&#xff0c;构建一个简单而实用的陪诊预约系统&#xff0c;以提升医疗服务的效率和用户体验。 技术栈选择 在开始之前&#xff0c;我们需要选择…

AUTOSAR CanTSyn模块配置与代码实现(二)

AUTOSAR CanTSyn模块配置与代码实现 1、FUP message处理 CanTSyn_process_FUP_message 先比较和SYNC报文的Sequence是否相等&#xff0c;如果不相等则不接受该报文。 然后调用CanTSyn_unpack_store_fup处理fup报文。 获取接收到FUP时的本地时间&#xff0c;并与接收到的SYNC…

Linux静态ip

Linux静态ip Ⅰ、修改静态ip Ⅰ、修改静态ip 修改静态ip必须是root用户 su root //切换root用户 ip a //查看修改前的动态ipvi /etc/sysconfig/network-scripts/ifcfg-ens33 //打开网卡配置文件&#xff0c;修改一处&#xff0c;新增四处 BOOTPROTO&quo…

3 使用postman批量创建测试数据

上一篇:2 使用postman进行接口测试-CSDN博客 在软件测试实际工作中,因测试需要,我们要批量创建测试数据。如果某些接口不允许输入重复数据,我们在做批量请求时就要做参数处理了。 比如在上一篇介绍的用户注册接口,一般注册的时候用户名是不允许重复的,如果要批量创…

如何入门 GPT 并快速跟上当前的大语言模型 LLM 进展?

入门GPT 首先说第一个问题&#xff1a;如何入门GPT模型&#xff1f; 最直接的方式当然是去阅读官方的论文。GPT模型从2018年的GPT-1到现在的GPT-4已经迭代了好几个版本&#xff0c;通过官方团队发表的论文是最能准确理清其发展脉络的途径&#xff0c;其中包括GPT模型本身和一…

算法基础之约数个数

约数个数 核心思想&#xff1a; 用哈希表存每个质因数的指数 然后套公式 #include <iostream>#include <algorithm>#include <unordered_map>#include <vector>using namespace std;const int N 110 , mod 1e9 7;typedef long long LL; //long l…

orangepi5plus刷自编译armbian系统

准备好一个编译主机&#xff0c;配置尽量高一点。尽可能有上google的环境配置。 主要步骤 1. 克隆源码 armbian源码仓库 2. 配置apt源 更改/etc/apt/sources.list为国内源&#xff0c;比如我这里ubuntu主机配置清华源。 然后执行apt-get -y update && apt-get -y…

Netty Review - ByteBuf 读写索引 详解

文章目录 概念Pre概述ByteBuf简介ByteBuf的主要特性结构APIByteBuf的创建读写操作示例引用计数操作其他常用操作 Code 演示 概念 Pre Netty Review - 探索ByteBuf的内部机制 概述 Netty的ByteBuf是一个强大的字节容器&#xff0c;用于处理字节数据。它提供了比Java标准库中的…

DAY11

问题一&#xff1a;指针与引用的区别 疑问 为什么引用的本质是指针常量&#xff0c;但是对它求sizeof却是变量所占内存空间的大小那&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f; 1.引用是给变…

llvm后端之DAG设计

llvm后端之DAG设计 引言1 核心类设计2 类型系统2.1 MVT::SimpleValueType2.2 MVT2.3 EVT 3 节点类型 引言 llvm后端将中端的IR转为有向无环图&#xff0c;即DAG。如下图&#xff1a; 图中黑色箭头为数据依赖&#xff1b;蓝色线和红色线为控制依赖。蓝色表示指令序列化时两个节…

【教3妹学编程-算法题】循环移位后的矩阵相似检查

插&#xff1a; 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家一起学习鸭~~~ 3妹&#xff1a;“太阳当空照&#xff0c;花儿对我笑&…

干货!什么是财务业务化和业务财务化?

此回答摘录自《自价值财务&#xff1a;以业务与财务的双向奔赴&#xff0c;成就合规与增长双赢》&#xff0c;原文近7000字&#xff0c;作者纷享销客CFO郭保彬先生。更多业财一体化内容详见纷享销客最新专刊《上市公司如何打好合规与增长双赢之战》。 如今&#xff0c;财务管理…

【Kotlin】基础变量、集合和安全操作符

文章目录 数字字面常量显式转换数值类型转换背后 位运算符字符串字符串模板修饰符数组集合&#xff08;Kotlin自带&#xff09;通过序列提高效率惰性求值序列的操作方式中间操作末端操作 可null类型安全调用操作符 ?.操作符 ?:非空断言操作符 !! 使用类型检测及自动类型转换安…

第二百一十七回 修改页面导航中遇到的问题

文章目录 1. 问题介绍2. 使用方法3. 代码与分析3.1 示例代码3.2 代码分析4. 内容总结我们在上一章回中介绍了"分享一种更新页面数据的方法"相关的内容,本章回中将介绍修改页面导航中遇到的问题.闲话休提,让我们一起Talk Flutter吧。 1. 问题介绍 我们在页面之间导…

学习——html基础

什么是HTML Hyper Text Markup Language (超文本标记语言) 标记又俗称标签(tag)&#xff0c;一般格式&#xff1a; 如 <h1></h1>标签里还可以有属性(Attribute)&#xff1a; <tagName Atrribute “value" /> 如 <meta charset"utf-8"…

selenium自动化webdriver下载及安装

1、确认浏览器的版本 在浏览器的地址栏&#xff0c;输入chrome://version/&#xff0c;回车后即可查看到对应版本 2、找到对应的chromedriver版本 2.1 114及之前的版本可以通过点击下载chromedriver,根据版本号&#xff08;只看大版本&#xff09;下载对应文件 2.2 116版本通过…

【进阶篇】YOLOv8实现K折交叉验证——解决数据集样本稀少和类别不平衡的难题,让你的模型评估更加稳健

YOLOv8专栏导航&#xff1a;点击此处跳转 K折交叉验证 K折交叉验证&#xff08;K-Fold Cross-Validation&#xff09;是一种常用的机器学习模型评估方法&#xff0c;可以帮助我们评估模型的性能&#xff0c;特别适用于数据集相对较小的情况。 在K折交叉验证中&#xff0c;将原…

redis相关面试题

1、说一说你在项目中的redis的应用场景&#xff1f; 需要频繁查询的数据&#xff0c;分布式锁&#xff0c;spring session 5大value类型&#xff1a;string hash list set zset基本上就是缓存为的是服务无状态&#xff0c;延申思考&#xff0c;看你的项目有哪些数据结构或对象…