分类：组件通信

2021
09-06

Vue3.x使用mitt.js进行组件通信

目录快速开始使用方式核心原理Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。快速开始npminstall--savemitt方式1，全局总线，vue入口文件main.js中挂载全局属性。import{createApp}fr... 继续阅读 >

2021
07-01

Vue如何实现组件间通信

目录1.父子间通信1.1父组件-->儿子组件1.2儿子组件-->父组件2.爷孙间通信3.任意组件间通信3.1EventBus3.2Vuex1.父子间通信最常见的就是父子之间的通信，通信是双向的数据传递。1.1父组件-->儿子组件父组件向儿子组件传递数据的方式就是通过Prop向子组件传递数据。//child.vue<template><div>我是儿子，我收到来自父亲的数据为{{value}}</div></template><script>exportdefault{props:{... 继续阅读 >

2021
06-23

如何用Vue实现父子组件通信

一、父子组件的关系构成本篇文章将要总结的是Vue中父子组件之间的通信方式。那在vue中父子组件之间的关系是怎么构成的呢，或者说哪个组件可以称为是父组件，哪个组件又可以称为是子组件呢。在我的理解中，父子组件的关系构成也比较简单。使用vue-cli工具构建的项目中，我们经常会在一个组件中注册引用另外一个组件。Home.vue<template><divclass="home"><p>这里是Home组件</p></div></template><script>exportdefault{... 继续阅读 >

2021
06-11

Vue3使用mitt进行组件通信的步骤

Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。1.安装推荐使用yarn安装（用过都知道有多丝滑）yarnaddmitt或者通过npm安装npminstall--savemitt2.引入到项目并挂载可以在main.js挂载到全局//标... 继续阅读 >

2020
10-10

Vue通过provide inject实现组件通信

provide/inject是Vue.js2.2.0版本后新增的API：provide：Object|()=>Object//一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。inject：Array<string>|{[key:string]:string|Symbol|Object}//一个字符串数组，或一个对象虽然官方文档说，provide和inject主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中，但是在插件/组件库（比如iView，事实上iView的很多组件都在用）。不过建议... 继续阅读 >

2020
10-10

Vue组件通信$attrs、$listeners实现原理解析

前言vue通信手段有很多种，props/emit、vuex、eventbus、provide/inject等。还有一种通信方式，那就是$attrs和$listeners，之前早就听说这两个api，趁着有空来补补。这种方式挺优雅，使用起来也不赖。下面例子都会通过父、子、孙子，三者的关系来说明使用方式。$attrs官方解释：包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时，这里会包含所有父作用域的绑定(cla... 继续阅读 >

2020
10-10

详解vue组件之间的通信

说明：下面我总结了比较常用的vue组件之前通信的方式，最近准备面试，所以有些总结贴上来分享props和$emit只有父子关系才可以用这种方式，父组件向子组件传递参数用props，子向父传递使用触发$emit自定义事件1.props<!--parent.vue,可以传递`静态`的props和`动态`的props,静态的参数只能是个String类型的，如果是其他类型的一定要记得加`:`来表示这是一个js表达式而不是一个字符串--><Child:name="name":age="18"address=... 继续阅读 >