vue父子组件通讯的几种方式总结学习

一直都是公司前端在写组件,我想着自己也写一波,然后先看看父子组件传值的内容,想写一写小demo然后练习一下这个内容,也算是系统学习一下怎么处理这个内容

其实就是2种父传子和子传父

1.父组件传子组件数据

其实就是父在标签中可以给子传值主要利用props

子组件

<template>
    <h3>Child
        <div>{{ name }}</div>
        <div>{{ age }}</div>
    </h3>
    
</template>
<script>
export default{
    name:"childCompont",
    props:{
        name:{
            type:String,
            default:"",
            require:true
        },
        age:{
            type:Number,
            default:1
        }
    },
    data(){
        return{
            
        }
    },
    
}
</script>

父组件

<template>
  <div>
    <h3>{{ message }}</h3>
    <child-compont :name=name :age=age />   
  </div>
</template>
  <script>
  import childCompont from './childCompont.vue';  //1、导入Child组件
  export default {
    name: 'parentCompont',
    components: { childCompont }, //2、注入Child组件
    data() {
      return {
        name:"娃哈哈",
        age:"1",
        message: "Parent"
      }
    },
    
  }
  </script>

父组件可以1.动态传值,2.直接传字符串
子组件可以1.设置默认值,2.必传校验,3.然后设置默认值,类型校验

亲自试了了一下,如果校验不通过确实会报红
在这里插入图片描述
  这个小学习其实就是通过props属性将父组件的值传递给子组件,任何类型的值都可以作为props的值被传递,另外需要注意的是props传递数据,只能从父级传递到子级,不能反其道而行。只能接收
  props对数据类型的校验,用type规定父组件传过来的数据类型,如果不相符,控制台会抛出警告;默认值,default,数字和数组可以直接default:数据类型,而数组和对象,必须通过工厂函数返回默认值;必选项,通过required:true,要求父组件传值过来,否则控制台会抛出警告,最后要注意的是props接收的值是只读的,不能进行修改操作。

2.利用事件子组件传父组件数据

实际应用的场景,比如说我封装了一个下拉组件,然后下拉 然后再一个组件中使用这个下拉组件,然后我点击了这个下拉组件后,需要把下拉中的相关信息复写到父组件中,其实就是需要用这个内容,简单的说就是想把子组件的内容暴露给父的时候需要这个样子去处理。

可以在子组件中通过$emit(event, […参数])触发一个自定义的事件,这样,父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件, 并且可以在监听函数中依次取得所有从子组件传来的参数,但是这个前提是说,在子组件有东西可以传递这个时间的情况下,可以这么去做。

例如:
在子组件中某个部分写入:

this.emit('aaa', arg);

然后你就可以在父组件的子组件模板里监听:
// 这里是父组件的Template:

<child  @ aaa= "functionYours" />

子组件

<template>
    <h3>Child
        <button @click="click1">按钮给父传值1</button>
        <button @click="click2">按钮给父传值2</button>
    </h3>
    
</template>
<script>
export default{
    name:"childCompont",
    props:{

    },
    data(){
        return{
            
        }
    },
    methods: {
        click1(){
             console.log("按钮1答应打印1")   
             this.$emit("slectChange","按钮1点击了第一个参数","按钮1点击了第二个参数")
        },
        click2(){
            console.log("slectChange","按钮2点击了") 
            this.$emit("slectChange","按钮2点击了")
        }
    },
}
</script>

父组件

<template>
  <div>
    <h3>{{ data }}</h3>
    <h3>{{ data2 }}</h3>

    <child-compont @slectChange = "change"/>   
  </div>
</template>
  <script>
  import childCompont from './childCompont.vue';  //1、导入Child组件
  export default {
    name: 'parentCompont2',
    components: { childCompont }, //2、注入Child组件
    data() {
      return {
        data:"默认值",
        data2:"默认值2",
      }
      
    },
    methods: {
      change(data,data2){
        this.data = data
        this.data2 = data2
      }
    },
    
  }
  </script>

3通过ref属性在父组件中直接取得子组件的数据修改(data)

上面说的有个局限性就是它们都需要以事件机制为基础(无论是像click那样的原生事件还是自定义事件),而在事件发生的时候才能调用函数将数据传递过来,就是肯定要有事件产生才能传值,

但如果子组件里没有类似“按钮”的东西,因而无法制造原生事件,同时也没办法找到一个触发自定义事件的时机的时候,怎么从子组件向父组件传递数据呢?

这个时候, 我们就只能从父组件中“直接取”子组件的数据了,借助ref属性

ref是我们经常用到的Vue属性,利用它可以简单方便地从本组件的template中取得DOM实例,而实际上,如果你在父组件中为子组件设置ref的话, 就可以直接通过vm.$refs.[子组件的ref].[子组件的属性]去拿到数据啦,例如:

实际的场景使用:就是你想从父直接修改或者触发子组件的方法的时候,可以使用这个内容,和上面时间不同的是,就是上面那个需要有事件才行,但是ref没这个限制,直接就可以从父访子。

handleAdd() {
  this.$refs.addEdit.type = "add";
  this.$refs.addEdit.beforeLoadForm();
  this.$refs.addEdit.visible = true;
},

4通过sync实现数据双向绑定, 从而同步父子组件数据

通过以上三种方式, 我想你应该能解决绝大多数父子组件通信的场景了,但让我们再仔细考虑一下上面的通信场景,就会发现它们还可能存在的问题:

从子组件向父组件传递数据时,父子组件中的数据仍不是每时每刻都同步的

但在某些特殊的需求场景下,我们可能会希望父子组件中的数据时刻保持同步, 这时候你可能会像下面这样做:

这是父组件中的template:

<son :foo="bar" v-on:update="val => bar = val"></son>

在子组件中, 我们通过props声明的方式接收foo并使用

props: {
     foo: [type]
}

同时每当子组件中数据改变的时候,通过

this.$emit('update', newValue)

把参数newValue传递给父组件template中监听函数中的"val"。然后通过

val => bar = val

这个表达式就实现了bar = newValue. 这个时候,我们发现父组件这个表达式就实现了bar = newValue. 这个时候,我们发现父组件中的关键数据bar被子组件改变(相等)了!

通过数据的双向绑定, 父(组件)可以修改子的数据, 子也可以修改父的数据

Vue提供了sync修饰符简化上面的代码,例如:

<comp :foo.sync="bar"></comp>

会被扩展为:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

然后你需要在子组件中改变父组件数据的时候, 需要触发以下的自定义事件:

this.$emit("update:foo", newValue)

【注意】你可能觉得这好像和我上面提到的二中的“通过自定义事件(emit)从子组件向父组件中传递数据”的那一节的内容似乎重叠了,。然而并不是, 两者有着父子组件关系上的不同,

1.在我们讲解sync的这一小节里, 自定义事件发生时候运行的响应表达式是:

<son :foo="bar" v-on:update="val => bar = val"></son> 中的 "val => bar = val"

2.在二中的“通过自定义事件从子组件向父组件中传递数据” 里,自定义事件发生时候运行的响应表达式是:

<Son v-on: eventYouDefined = "arg => functionYours(arg)" /> 中的 "arg => functionYours(arg)"

对前者, 表达式 val => bar = val意味着强制让父组件的数据等于子组件传递过来的数据, 这个时候,我们发现父子组件的地位是平等的。 父可以改变子(数据), 子也可以改变父(数据),2者的关系完全不像是父和子的关系,更像是朋友,这种的。就是父组件中的数据变化可以后可以影响子组件,然后子改变了以后也可以改变父组件

对后者, 你的functionYours是在父组件中定义的, 在这个函数里, 你可以对从子组件接受来的arg数据做任意的操作或处理, 决定权完全落在父组件中, 也就是: 父可以改变子(数据), 但子不能直接改变父(数据)(就是说你需要触发父组件的时间来改变父的内容)!

数据双向绑定是把双刃剑

从好处上看:

1.它实现了父子组件数据的“实时”同步, 在某些数据场景下可能会使用到这一点,
4.sync提供的语法糖使得双向绑定的代码变得很简单

从坏处上看:

它破环了单向数据流的简洁性, 这增加了分析数据时的难度

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

计算机网络-流量控制(数据链路层的流量控制及与传输层流量控制的区别 流量控制的方法 可靠传输,滑动窗口,流量控制三者关系)

文章目录 数据链路层的流量控制及与传输层流量控制的区别流量控制的方法各方法对应的发生窗口和接收窗口大小 可靠传输&#xff0c;滑动窗口&#xff0c;流量控制三者关系小结 数据链路层的流量控制及与传输层流量控制的区别 端到端&#xff1a;两个主机之间的 点对点&#xf…

恒创科技:服务器内存不足影响大吗?

​  服务器在为网站、应用程序和在线服务提供支持方面发挥着关键作用。这些服务器需要提供最佳性能&#xff0c;以确保正常无缝的用户体验&#xff0c;而RAM是显著影响服务器性能的关键配置之一。 RAM 是一种随机存取存储器&#xff0c;计算机和服务器使用它来临时存储正在使…

VM安装Centos7

目标&#xff1a; 一&#xff0c;安装Centos7 二&#xff0c;ssh可以连接 1 新建虚拟机 一直下一步 2 直到此处&#xff0c;选择稍后安装 一直下一步直到完成。 3 选中虚拟机&#xff0c;点击设置 选择CD/DVD&#xff0c;选取ISO映像文件。 4 等待安装 并且设置root密码 5…

苹果证书过期有什么影响

引言 苹果证书是一种数字签名&#xff0c;用于验证应用程序的身份和完整性。然而&#xff0c;若该证书过期&#xff0c;将会对用户和开发者带来一定的影响。在本文中&#xff0c;我们将详细介绍苹果证书过期的原理和影响&#xff0c;并提供一些解决方法。 苹果证书的原理 苹…

机器学习 | 探索朴素贝叶斯算法的应用

朴素贝叶斯算法是一种基于贝叶斯定理和特征条件独立假设的分类算法。它被广泛应用于文本分类、垃圾邮件过滤、情感分析等领域&#xff0c;并且在实际应用中表现出色。 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法&#xff1a; 1&#xff09;对于给定的待分类项r…

Redis(十三)缓存双写一致性策略

文章目录 概述示例 缓存双写一致性缓存按照操作来分&#xff0c;细分2种读写缓存&#xff1a;同步直写策略读写缓存&#xff1a;异步缓写策略双检加锁策略 数据库和缓存一致性更新策略先更新数据库&#xff0c;再更新缓存先更新缓存&#xff0c;再更新数据库先删除缓存&#xf…

【el-tree 文字过长处理方案】

文字过长处理方案 一、示例代码二、关键代码三、效果图 一、示例代码 <divstyle"height: 600px;overflow: auto"class"text item"><el-treeref"tree":data"treeData":props"defaultProps"class"filter-tree&…

C++ 语法文件

程序运行时产生的数据都属于临时数据&#xff0c;程序结束就会被释放。 通过文件可以可以将数据持久化 c中对文件操作需要包含头文件fstream 文件的类型分为两种 1.文本文件 文件以文本的ASCII码形式存储在计算机中 2.二进制文件 稳重以文本的二进制形式存储在计算机中 用…

【云原生之kubernetes系列】--HPA自动伸缩

HPA自动伸缩 HorizontalPodAutoscaler&#xff08;简称 HPA &#xff09;自动更新工作负载资源&#xff08;例如Deployment或者Statefulset)&#xff0c;目的是让pod可以自动扩缩工作负载以满足业务需求。 水平扩缩意味着对增加的负载的响应是部署更多的Pod。这与“垂直&…

MIT_线性代数笔记:第 34 讲 总复习

目录 试题1试题2试题3试题4试题5 本讲为线性代数课程总复习&#xff0c;复习的方法就是做往年试题。 试题1 1&#xff09;已知 Ax [ 1 0 0 ] \begin{bmatrix} 1\\0\\0 \end{bmatrix} ​100​ ​ 无解&#xff0c;Ax [ 0 1 0 ] \begin{bmatrix} 0\\1\\0 \end{bmatrix} ​010​ …

锐捷VSU和M-LAG介绍

参考网站 堆叠、级联和集群的概念 什么是堆叠&#xff1f; 框式集群典型配置 RG-S6230[RG-S6501-48VS8CQ]系列交换机 RGOS 12.5(4)B1005版本 配置指南 总结 根据以上的几篇文章总结如下&#xff1a; 级联&#xff1a;简单&#xff0c;交换机相连就叫级联&#xff0c;跟搭…

2-1 动手学深度学习v2-Softmax回归-笔记

回归 VS 分类 回归估计一个连续值分类预测一个离散类别 从回归到多类分类 回归 单连续数值输出输出的区间&#xff1a;自然区间 R \mathbb{R} R损失&#xff1a;跟真实值的区别 分类 通常多个输出&#xff08;这个输出的个数是等于类别的个数&#xff09;输出的第 i i i…

0-MQTT基础使用教程【学习】

文件路径 MQTT基础使用教程1. MQTT1.1 MQTT简介1.1.1 什么是MQTT1.1.2 设计原则1.1.3 应用领域1.2 MQTT协议相关概念1.2.1 MQTT协议实现方式1.2.2 MQTT协议中的方法1.3 消息服务质量QoS1.3.1 消息服务质量QoS三个等级1.3.2 发布与订阅QoS1.4 Topic通配符匹配规则2. EMQX2.1 EMQ…

工程机械设备通讯如何选?CAN控制器 以太网控制器

在工程机械设备的通讯世界中&#xff0c;有四种主流的通讯方式各领风骚。它们各有特色&#xff0c;适用于不同的场景和需求。让我们一起来深入了解它们&#xff0c;看看如何为自己的设备选择最合适的通讯方式吧&#xff01; 以太网通讯 特点速览&#xff1a;高速、稳如磐石、…

IP代理在网络中解决了哪些问题?代理IP使用时效是什么意思?

随着互联网的普及和发展&#xff0c;IP代理作为一种网络工具&#xff0c;被广泛应用于各种场景。IP代理的使用可以解决很多网络中的问题&#xff0c;提高网络访问的速度和安全性。本文将详细介绍IP代理在网络中解决的问题&#xff0c;以及代理IP使用时效的含义。 一、IP代理在网…

用python实现pdf按页切割,以及将pdf转成图片

我们经常遇到需要切割pdf的时候&#xff0c;但是常规手段很难做到 我们可以利用python脚本来实现 需要安装几个库 tk PyPDF2 PyMuPDF pyinstaller 上图&#xff01; 查看结果 切割pdf转存成图像 那我们来详细说一下使用方法 1.输入PDF位置:这里没什么好说的&#xff0c…

vue3:24—组件通信方式

1、props 子组件也可以如下调用父组件的方法 2、自定义事件 &#xff08;emit&#xff09; 3、mitt&#xff08;任意组件的通讯&#xff09; 1. pubsub 2. $bus 3. mitt 接收数据的:提前绑定好事件(提前订阅消息)提供数据的:在合适的时候触发事件发布消息) 安装mitt npm i…

NLP深入学习:《A Survey of Large Language Models》详细学习(三)

文章目录 1. 前言2. 预训练2.1 数据搜集与准备2.1.1 数据源2.1.2 数据预处理2.1.3 数据调度 2.2 架构设计2.2.1 典型架构2.2.2 详细配置2.2.3 预训练任务2.2.4 长上下文建模2.2.5 解码策略 2.3 模型训练2.3.1 优化设置2.3.2 可扩展&#xff08;Scalable&#xff09;的训练技术 …

线性代数:矩阵的初等变换

目录 一、初等行变换 行阶梯 / 行最简 性质 二、矩阵的标准型 三、矩阵的等价 四、初等矩阵 五、重要性质与定理 一、初等行变换 行阶梯 / 行最简 性质 二、矩阵的标准型 三、矩阵的等价 四、初等矩阵 五、重要性质与定理

java日志框架总结(五、logback日志框架)

一、logback概述 Logback是由log4j创始人设计的又一个开源日志组件。 Logback当前分成三个模块&#xff1a; 1、logback-core, 2、logback- classic 3、logback-access。 1&#xff09;logback-core是其它两个模块的基础模块。 2&#xff09;logback-…