Vue组件间通信方式超详细(父传子、父传后代、子传父、后代传父、兄弟组件传值)

news2024/11/14 2:23:34

一、父传子、父传后代

方式一：子通过props来接收

image.png
父组件：父组件引入子组件时，通过<child :parentValue = "parentValue"></child>子组件传值。

备注：这种方式父传值很方便，但是传递给后代组件不推荐(父->子->孙),且这种方式父组件不能直接修改父组件传过来的数据。

<template>
  <div>
    <h1>父组件</h1>
    <child :parentValue = "parentValue"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        parentValue:"父组件内的值"
      }
    }
  }
</script>
<style scoped>

</style>

子组件：子组件通过props即props:{ parentValue:{ type:String, default:"" } }来接收父组件传过来的值

<template>
  <div>
    <h2>子组件</h2>
    <hr>
    <span>{{parentValue}}</span>
  </div>
</template>

<script>
  export default {
    name: 'child',
    props:{
      parentValue:{
        type:String,
        default:""
      }
    },
    data () {
      return {
      }
    },
  }
</script>
<style scoped>

</style>

方式二：通过this.$parent.xxx子组件直接使用父组件的值

备注：这种方式，子组件可以直接修改父组件的数据。

image.png
父组件：正常引入子组件

<template>
  <div>
    <h1>父组件</h1>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        parentValue:"父组件内的值"
      }
    }
  }
</script>

子组件：通过this.$parent.parentValue获取父组件的数据。

<template>
  <div>
    <h2>子组件</h2>
    <span>我是通过this.$parent.xxx直接获取父组件的值：</span>
    <br>
<!--    <span>{{this.$parent.parentValue}}</span>-->
    <span>{{parentValueToSon}}</span>
  </div>
</template>

<script>
  export default {
    name: 'child',
    data () {
      return {
        parentValueToSon:"",
      }
    },
    created() {
      this.parentValueToSon = this.$parent.parentValue;
    }
  }
</script>

方式三：依赖注入provide/inject

备注：这种方式父组件可以直接向某个后代组件传值，不用再一级一级的传递。

缺点：很难去找这个值是从哪个组件传递过来的。

image.png
父组件：通过provide定义需要传递给后代的数据。

<template>
  <div>
    <h1>父组件</h1>
    <hr>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
      }
    },
    //通过依赖注入方式传递给后代的数据
    provide(){
      return{
        parentProvideValue:"依赖的父组件的值"
      }
    }
  }
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <span>我是通过this.$parent.xxx直接获取父组件的值：</span>
    <br>
    <!--<span>{{this.$parent.parentValue}}</span>-->
    <span>{{parentValueToSon}}</span>
    <hr>
    <grandson></grandson>
  </div>
</template>

孙子组件：通过inject注入爷爷辈组件传递过来的值。

<template>
  <div>
    <h3>孙子组件</h3>
    <span>获取到的爷爷辈组件传递过来的值：</span>
    <br>
    <span>{{parentProvideValue}}</span>
  </div>
</template>

<script>
  export default {
    name: 'grandson',
    //获取父组件传递过来的值
    inject:['parentProvideValue'],
    data () {
      return {
      }
    }
  }
</script>
<style scoped>

</style>

效果图：

image.png

二、子传父、后代传父

方式一：this.$emit(“function”,param)

子组件通过$emit传递一个函数和参数，父组件通过传递过来的函数接收参数即传过来的值。

父子组件一般会触发交互行为(子组件传递过来的值放在生命周期函数里是传不过来的)，所以可以通过父子的交互行为获取到子组件传递过来的数据。

image.png
父组件：通过子组件自定义的函数进行绑定接收传递过来的数据。

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child @tansToParent = "tansToParent"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
    },
    methods:{
      tansToParent(val) {
        this.getSonToParentValue = val;
        console.log("子组件传递过来的值",val)
      }
    }
  }
</script>

子组件：通过this. e m i t ( " f u n c t i o n " , p a r a m ) 子组件通过 emit("function",param) 子组件通过 emit("function",param)子组件通过emit传递一个函数和参数，父组件通过传递过来的函数接收参数即传过来的值。

<template>
  <div>
    <h2>子组件</h2>
    <button @click="toParentValue">子组件按钮</button>
    <hr>
    <grandson></grandson>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        childValue:"子组件传递给父组件的值",
      }
    },
    created() {

    },
    methods:{
      toParentValue(){
        //通过this.$emit给父组件传值
        this.$emit('tansToParent',this.childValue)
      }
    }
  }
</script>

效果图：

image.png

方式二：this.$child.xxx直接获取子组件数据，且可直接修改子组件的数据。

父组件：this.$children[0].childValue获取子组件数据，只有一个子组件故下标为0.

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
      this.getSonToParentValue = this.$children[0].childValue
    }
  }
</script>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <button>子组件按钮</button>
    <hr>
    <grandson></grandson>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        childValue:"子组件传递给父组件的值",
      }
    },
    created() {

    },
    methods:{
    }
  }
</script>

方式三：通过ref/refs获取子组件dom从而直接获取子组件数据。可直接修改子组件数据。

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <span>接收到子组件传递过来的值：</span>
    <span>{{getSonToParentValue}}</span>
    <hr>
    <child ref="childDom"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: 'parent',
    components: {Child},
    data () {
      return {
        getSonToParentValue:"",
      }
    },
    mounted() {
      this.getSonToParentValue = this.$refs.childDom.childValue
    }
  }
</script>

子组件与上述相同。

三、兄弟组件传值

方式一：通过中转eventBus.js工具类

新建一个中转eventBus.js工具类，传值的兄弟组件自定义一个函数通过

eventBus.$emit('function',参数);

给接收值的兄弟组件传一个约定好的function名称及参数(即传递的值)；接收值的兄弟组件通过

eventBus.$on('function',val=>{
  console.log("传递过来的值",val)
})

来接收传递过来的值。

image.png
eventBus.js:

import Vue from 'vue'
export default new Vue();

传值的兄弟组件：

<template>
  <div>
    <h2>子组件</h2>
    <button @click="toBrother">点击给兄弟组件传值</button>
  </div>
</template>

<script>
  import Grandson from "./grandson";
  import eventBus from "../utills/eventBus";
  export default {
    name: 'child',
    components: {Grandson},
    data () {
      return {
        transToBrother:"这是传递给兄弟组件的值",
      }
    },
    methods:{
      toBrother(){
        eventBus.$emit('toBrotherFunc',this.transToBrother);
      }
    }
  }
</script>

接收值的兄弟组件：

<template>
  <div>
    <h3>孙子组件</h3>
    <span>兄弟组件传递过来的值：</span>
    <span>{{eventBusValue}}</span>
  </div>
</template>

<script>
  import eventBus from "../utills/eventBus";
  export default {
    name: 'grandson',

    data () {
      return {
        eventBusValue:"",
      }
    },
    created() {
      eventBus.$on('toBrotherFunc',val=>{
        this.eventBusValue = val;
      })
    }
  }
</script>

效果图：
在这里插入图片描述

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

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

相关文章

高燃！GitHub上标星75k+超牛的Java面试突击版

高燃！GitHub上标星75k+超牛的Java面试突击版

前言不论是校招还是社招都避免不了各种面试。笔试&#xff0c;如何去准备这些东西就显得格外重要。不论是笔试还是面试都是有章可循的&#xff0c;我这个有章可循‘说的意思只是说应对技术面试是可以提前准备。运筹帷幄之后&#xff0c;决胜千里之外!不打毫无准备的仗,我觉得大…
阅读更多...
电子科技大学软件工程期末复习笔记（四）：软件设计

电子科技大学软件工程期末复习笔记（四）：软件设计

目录 前言 重点一览 软件工程设计 软件设计定义 软件设计包含的两类活动 软件设计包涵 软件的质量属性 各种设计技术 程序结构(深度、宽度、扇入、扇出) 完整的设计规格 软件体系架构 用户界面设计的3条原则 用户界面设计的3种分析 结构化设计方法 结构化程序设…
阅读更多...
linux所需的pcre库和zlib库从网上下载的步骤

linux所需的pcre库和zlib库从网上下载的步骤

在linux服务器安装Nginx的时候需要下载一些依赖的库,其中就有pcre 和 zlib正常情况下执行如下命令就可以了yum install -y pcre pcre-develyum install -y zlib zlib-devel但是有时候会有各种原因报错,你可以选择去解决,也可以换个思路,那么我不从yum源下载了,直接从网上下载所…
阅读更多...
PGLBox 超大规模 GPU 端对端图学习训练框架正式发布

PGLBox 超大规模 GPU 端对端图学习训练框架正式发布

作者 | PGLBox项目组 导读 PGLBox是百度研发的基于GPU的大规模图模型训练框架&#xff0c;支持数百亿节点和边的图模型全GPU训练&#xff0c;已在百度广泛部署。相比业界主流的分布式 CPU 解决方案&#xff0c;PGLBox 具有超高性能、超大规模、算法丰富、灵活易用、落地广泛等优…
阅读更多...
springBoot 处理静态资源原理

springBoot 处理静态资源原理

springBoot是如何自动处理静态并映射静态资源的&#xff0c;直接上代码。 一、在springBoot autoconfigure jar包中&#xff0c;存在WebMvcAutoConfiguration 自动配置类&#xff0c;该类的生效条件是&#xff1a;存在Servlet ,DispatcheServlet ,WebMvcConfigurer这三个类…
阅读更多...
k8s 配置ingress 并做一个demo

k8s 配置ingress 并做一个demo

需求&#xff1a;k8s 配置好之后除了 nodeport 以外都是对集群内部的行为使用nodeport 并不是很友好&#xff0c;要自己处理很多的端口管理使用ingress 可以更好的整合配置服务进程&#xff1a;下载ingress-nginx 的yaml 文件https://github.com/kubernetes/ingress-nginx/blob…
阅读更多...
京东HBase异地多活调研

京东HBase异地多活调研

京东HBase平台架构 HBase Replication原理 HBase的Replication是基于WAL日志文件的&#xff0c;在主集群中的每个RegionServer上&#xff0c;由ReplicationSource线程来负责推送数据&#xff0c;在备集群的RegionServer上由ReplicationSink线程负责接收数据。ReplicationSourc…
阅读更多...
Web自动化测试框架Selenium

Web自动化测试框架Selenium

作者&#xff1a;霍格沃兹测试开发学社 链接&#xff1a;https://www.zhihu.com/question/59854292/answer/2827875817 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 什么是自动化测试 自动化测试就是&#xff0…
阅读更多...
电子技术——AB类输出阶

电子技术——AB类输出阶

电子技术——AB类输出阶 原理 交越失真可以通过通过一个较小的偏置电流解除&#xff0c;如下图&#xff1a; QNQ_NQN​ 和 QPQ_PQP​ 的基极之间存在偏置电压 VBBV_{BB}VBB​ 。对于完美匹配的晶体管&#xff0c;当 vI0v_I 0vI​0 的时候&#xff0c;此时 vO0v_O 0vO​0 。每…
阅读更多...
初识CSS

初识CSS

1.CSS语法形式CSS基本语法规则就是:选择器若干属性声明由选择器选择一个元素,其中的属性声明就作用于该元素.比如:<body><p>这是一个段落</p><!-- style可以放在代码的任意地方 --><style>p{/* 将字体颜色设置为红色 */color: red;}</style&g…
阅读更多...
Android 动画详解

Android 动画详解

Android动画的分类与使用学习Android必不可少的就是动画的使用了&#xff0c;在Android版本迭代的过程中&#xff0c;出现了很多动画框架&#xff0c;这里做一个总结。Android动画类型分类逐帧动画【Frame Animation】&#xff0c;即顺序播放事先准备的图片。补间动画【Tween A…
阅读更多...
Mysql——双机同步

Mysql——双机同步

遇到一个需求&#xff0c;需要两台服务器的上的mysql数据库数据实时同步&#xff0c;包括结构也同步。 利用mysql本身的binlog确实实现了这个效果&#xff0c;但是因为个实际业务场景不满足&#xff0c;所以pass掉了&#xff0c;但是记录一下。 目录一、环境二、配置2.1 创建同…
阅读更多...
件测试之易用性测试

件测试之易用性测试

一、易用性测试概述我们所说的易用性测试是指软件界面的测试&#xff0c;而对于产品的易用性来说&#xff0c;不仅仅是软件界面&#xff0c;还包括硬件(即产品的外观)&#xff0c;如按钮图标是否易懂、菜单是否易找到等。易用性主要研究3个方向&#xff1a;用户研究、交互设计、…
阅读更多...
【使用两个队列实现栈】

【使用两个队列实现栈】

文章目录前言使用两个队列实现栈1.队列接口函数引入2.栈的初始化3.向栈中插入元素4.出栈操作5.取出栈顶元素6.判断栈是否为空7.释放内存空间总结前言 本文章主要介绍栈和队列的相互转换。 使用两个队列实现栈 我们知道&#xff0c;栈的特点是后进先出&#xff0c;而队列的特点…
阅读更多...
[工具笔记]1.UnityEngine.Plane

[工具笔记]1.UnityEngine.Plane

public struct Plane : IFormattable{} Plane是存在于 3D 空间中&#xff0c;无限大的平坦表面&#xff0c;将空间划分为两半&#xff08;称为半空间&#xff09;。可方便地确定特定点处于两个半空间的哪一个中&#xff0c;以及确定该点与平面相距多远。 此对象在unity并不可见…
阅读更多...
一分钟掌握技术术语：API（接口）

一分钟掌握技术术语：API（接口）

很多产品经理在项目开发过程中经常听到&#xff1a;你调我这个接口就好了&#xff1b;这个功能你写个接口给我&#xff1b;有什么不懂的就看下API接口文档。 开发经常说的接口是什么意思呢&#xff1f;术语解释&#xff1a;API&#xff08;Application Programming Interface&…
阅读更多...
【C++】泛型编程——模板初阶

【C++】泛型编程——模板初阶

文章目录1. 泛型编程2. 函数模板2.1 函数模板的概念2.2 函数模板的使用2.3 函数模板的原理2.4 函数模板的实例化隐式实例化显式实例化2.5 模板参数的匹配原则3. 类模板1. 泛型编程 首先我们来思考一个问题&#xff1a;如何实现一个通用的交换函数呢&#xff1f; 即我们想交换两…
阅读更多...
神经网络中的激活函数

神经网络中的激活函数

文章目录为什么要使用激活函数常用的激活函数如何选择激活函数ReLU激活函数的优点及局限性为什么Sigmoid和Tanh会导致梯度消失的问题为什么Tanh收敛速度⽐Sigmoid快&#xff1f;为什么要使用激活函数 在真实情况中&#xff0c;我们往往会遇到线性不可分问题&#xff0c;需要非…
阅读更多...
汇编指令学习（MOV，MOVSX，MOVZX，LEA，XCHG）

汇编指令学习（MOV，MOVSX，MOVZX，LEA，XCHG）

一、MOV指令1、将十六进制0x1234数值&#xff0c;赋值给eax寄存器mov eax,0x12342、将十六进制0x123数值&#xff0c;赋值给内存地址为ebxmov dword [ebx],0x1233、将edx的高八位赋值给eax的低八位ax&#xff0c;eax的低16位&#xff0c;al&#xff0c;eax的低8位&#xff0c;a…
阅读更多...
RedisTemplate 的基本使用手把手教

RedisTemplate 的基本使用手把手教

下载实例源码 使用步骤 1、引入 spring-boot-starter-data-redis 依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId> </dependency>2、在 application.yml 配置 R…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023