vue组件间通信

Vue组件之间通信方式有哪些

一、父子组件通讯

1、props,emit

父组件可以通过props给子组件传递变量。子组件可以通过emit派发自定义事件,使父组件可以获得事件函数传递过来的形参。

2、parent、children、ref

父组件可以通过 c h i l d r e n 获取子组件,从而获取子组件的属性和方法。 v u e 3 已不支持 children获取子组件,从而获取子组件的属性和方法。vue3已不支持 children获取子组件,从而获取子组件的属性和方法。vue3已不支持children,但是父组件还可以通过 r e f s 来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过 refs来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过 refs来获取子组件实例来获取子组件的属性和方法。而子组件也可以通过parent来获取父组件的属性和方法。

二、兄弟组件通讯

1、parent、root

通过父组件桥接传值通讯。

2、eventbus

vue2可以通过构造一个vue实例对象,通过调用vue.emit派发事件,on监听事件来实现兄弟组件的通讯,off解除事件绑定。但是在vue3中废弃了on方法,推荐使用第三方库mitt

3、vuex

三、跨层级组件通讯

1、provide、inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

provide

  • 一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

inject

  • 一个字符串数组
  • 一个对象

2、$attrs

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件------在创建高级别的组件时非常有用。

3、eventbus

4、vuex

四、另外

1、slot

2、mixin

相关推荐
知识分享小能手23 分钟前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one24 分钟前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲25 分钟前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell1 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830942 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮2 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel3 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常3 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip4 小时前
JavaScript事件流
前端·javascript
小菜全4 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json