前言

我们通常会把整个页面被分成小组件,这些组件有自己的功能和 UI。 有时,我们需要一种方法来在这些组件之间进行通信。
我们可以使用 Vuex(状态管理工具)来存储数据并跨组件使用。 但有时,我们需要一种方法将数据从一个组件发送到另一个组件,而无需使用 Vuex 存储。
请看下面

共有五种方法可以进行通信

1、使用Props (父组件通信子组件)

2、使用Events 事件(子组件通信父组件)

3、使用Event Bus 事件总线(父通信子,子通信父)

4、使用provide/inject 提供和注入对(父组件通信子组件)

5、使用this.$refs (子组件通信父组件)

第一种:Props

[父到子]使用Props可以将我们需要传输的数据从父组件传递到子组件。下面我们将使用props从parent.vue发送数据到child.vue

<!-- child.vue 代码 -->
<template><div>{{message}}</div>
</template><script>
export default {name: "child",props: ['message'] // 定义一个名为message的变量,在页面进行渲染
}
</script>
<!-- parent 组件 代码 -->
<template><div><!-- 使用子组件 child,绑定一个参数,参数名为message,值为当前组件变量名为message的值--><child :message="message"/>  </div>
</template><script>
import Child from "./child"; <!-- 使用子组件 -->export default {name: "parent",components: {Child},data() {return {message: '我是父类的数据'}}
}
</script>

第二种:Events

[子到父]通过子组件触发事件将数据发送到父组件,父组件使用v-on进行捕获,捕获时需要和发送事件同名,还可以检索参数

this.$emit(‘事件名’, args1, args2, args3,…) 就是一种触发事件的方法

<!-- child 子组件 代码 -->
<template><div><div @click="sendMessageToParent"></div></div>
</template><script>
export default {name: "child",message: "数据",methods: {sendMessageToParent() {// 点击后触发一个事件  事件名为childSuccess,参数为messagethis.$emit("childSuccess", this.message);}}
}
</script>
<!-- parent 父组件 代码 -->
<template><div><!-- 使用子组件 监听事件名为childSuccess的事件,一旦监听到后触发getData方法--><child @childSuccess="getData"/></div>
</template><script>
import Child from "./child";
export default {name: "parent",components: {Child},methods: {getData(_val) {// _val 就是子组件的事件携带的参数console.log(_val)}}
}
</script>

第三种:Event Bus

[父到子,子到父]当两个需要互相通信的组件不存在父子关系的时候,需要手动去监听组件上的事件的时候,就可以使用此方法(事件总线)。所以事件总线用于在任何两个组件之间进行通信(组件不需要具有父子关系)。

操作方法: 在一个组件使用this. r o o t . root. root.emit(‘事件名’,args1,args2,args3,…); 在另一个组件中使用this. r o o t . root. root.on(‘相同的事件名’,args1,args2,args3,…)

<!--component_one 组件 监听事件-->
<template>
</template><script>
export default {name: "component_one",mounted() {this.$root.$on("success", (msg) => {console.log(msg)})}
}
</script>
<!--component_two组件 发布事件-->
<template><div @click="sendMessageToComponentOne"><router-link to="/component_one">点我!</router-link></div>
</template><script>
export default {name: "component_two",methods: {sendMessageToComponentOne() {let msg = '你好呀!';this.$root.$emit("success",msg)}}
}
</script>

第四种:provide/inject

[父到子]此类主要是用于更深层嵌套组件的结构,使用这种方式可以更快捷更方便,且子孙后代后可以使用inject

<!-- parent 父组件 -->
<template><child />
</template><script>
import Child from "./child";
export default {name: "parent",components: {Child},provide() {return {"eventName": "参数"}}
}
</script>
<!-- child 子组件 -->
<template><div>{{eventName}}</div>
</template><script>
export default {name: "child",inject: ['eventName'],}
</script>

第五种:this.$refs

[子到父]一般都不推荐使用此种方法进行数据通信。 使用这种方式的时候,我们需要为子组件一个引用id

<!-- child 子组件 -->
<template>
</template><script>
export default {name: "child",data() {return {value: '你好呀!'}}
}
</script>
<!-- parent 父组件 -->
<template><child ref="child"/>
</template><script>
import Child from "./child";
export default {name: "parent",components: {Child},data() {return {message: null}},mounted() {// 获取子组件上的value值this.message = this.$refs.child.value;}
}
</script>

Vue组件通信的五种方法相关推荐

  1. Vue组件通信的五种方式

    Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...

  2. vue组件通信的几种方法

    vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法 组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...

  3. vue 组件通信的几种方式

    前言 在vue中,​ 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...

  4. vue组件通信的几种方式

    vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...

  5. Vue组件传值的三种方法

    Vue组件传值的三种方式 1.父传子 父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...

  6. vue组件通信的八种方式

    一.props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信. 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组 ...

  7. vue组件之间传值几种方法

    方法一.父子组件传值 通过props向下传递 父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...

  8. Vue组件通信的7个方法

    1.props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的 Vue.component("child",{ da ...

  9. Vue组件通信——父子组件通信的四种方法

    引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component( ...

  10. vue组件通信(传值)

    vue组件通信有以下几种方式可以实现(个人总结) 一.父组件到子组件传值方式: 一般通过在父组件中给子组件绑定属性的方式进行传值,子组件通过props来接收. 实例: //父组件 <templa ...

最新文章

  1. serlvert jsp mysql_JAVA基础:Java多语言编码问题解析(2)
  2. 探索可解释及稳定性,AI与博弈,自适应推理——“智源论坛:机器学习青年学者报告会”要点总结
  3. 和lock一起学beego 博客系统开发为例(五)
  4. 东华大学计算机学院推免名单,东华大学2020年推免流程及各学院录取情况的说明(持续更新)...
  5. java不同网址提示过期_使用history.back()出现警告: 网页已过期的解决办法
  6. ARP 地址解析协议
  7. linux上c语言hdc句柄,控制台窗口的绘图
  8. 蓝牙学习笔记(九)——BLE超过20字节数据包传输(MTU)
  9. 什么是一致性Hash算法? 1
  10. 微软提出Layout,多模态任务也有预训练模型啦
  11. 数据库基础(4)函数依赖公理和推论(Armstrong公理),属性闭包和求候选键的技巧
  12. PyQt5,资源文件 .qrc 的使用
  13. 汽车电工及电子技术基础【2】
  14. steam linux安装目录在哪,如何在Mac(以及Windows / Linux)上重新安装Steam游戏
  15. Genesys Business Continuity 部署
  16. oracle nlv 全称,oracle: OCA-047-题解与实验(9)--SQL语句中COUNT和NLV的用法
  17. 为什么计算机屏幕出现黄色,电脑为什么会出现显示器屏幕发黄
  18. 微信小程序车牌号组件,车牌号键盘,兼容新能源号牌
  19. RabbitMQ和fegin补充
  20. Unity URP打包安卓shader报错 报红 变红

热门文章

  1. Leetcode.334. 递增的三元子序列__从暴力到贪心/双向查找
  2. 什么是工作站执行控制列表(ECL)
  3. 考研笔记这么做,赶超对手一大步
  4. bootstrap-scrollspy
  5. 利用dxflib实现dxf文件的读写与可视化
  6. 给linux杀杀毒吧
  7. JAVA在线问诊系统的设计与实现计算机毕业设计Mybatis+系统+数据库+调试部署
  8. MapReduce基于物品的协同过滤算法实现电影推荐系统
  9. 【AI视野·今日NLP 自然语言处理论文速览 第三十七期】Wed, 20 Sep 2023
  10. 关于android UI布局自适应