Vue组件通信实践记录(推荐)


Posted in Javascript onAugust 15, 2017

组件通信

几乎所有的mvvm框架中都要涉及组件通信的功能(吐槽一下knockout,毕竟是鼻祖就先不说它了)。而且目前的前端形式来看,组件化是一个项目的基础。所以选好一个合适的框架后,随着组件的不断增加,业务的复杂度提升,组件之间的通信变得尤为重要。

实践方法

由于更换新的框架,我们的项目由Avalon更新成Vue.但是为了兼容以前的业务代码,不能直接使用vue的标准实践方式,我还是拿过来后封装了一个vue的class,具体业务里面不影响使用,封装的过程之后写出来再聊吧,下面来总结一下最近用到的通信实践方法。

1.父组件是通过props传递数据给子组件

vmodel 中包含了两个子组件

<div class="w-base">
  <book-component v-bind:bookdata="book"></book-component>
</div>

<div class="base">
  <node-component v-bind:catalog="catalog" ></node-component>
</div>

在上面这段代码中我们可以看到,定义了两个子组件,并且使用指定v-bind指令传递了数据,子组件会接收到传递的数据。

Vue.component('book-component', {
 template: tpl,//可以传进来子组件的模板文件
 props: ['book'],
 data: function () {
  return { myBook: this.bookdata }
 }
})

建议接收到单向的props数据后,定义一个局部变量来初始化使用。

2.父组件与子组件之间通信的其他方式

vue中给实例提供了三个我们可用的API $children 和 $refs 以及 $parent 。

$children :当前实例的直接子组件。需要注意 $children 并不保证顺序,也不是响应式的。

$refs :包含了当前实例所有拥有 ref 注册的子组件的对象.

$parent : 当前实例的父实例。

所以说,如果在通信方面我们我组件想要调用子组件,能用的方法只有 $refs 了,因为 $children 是一个数组,并且不保证顺序,也没有相关的id去寻找我们需要的那个特定子组件。但是如果使用 $refs 去寻找特定子组件,那就必须要给那个子组件注册 ref 。

父组件的模版

<!-- vm.$refs.child will be the child comp instance -->
<child-component ref="child"></child-comp>

父组件

//找到子组件并且调用它的方法
var myChild = this.$refs.child;
mymyChild.func();

子组件

//找到父组件并且调用它的方法
var myParent = this.$parent;
mymyChild.func();

3.平行组件之间的两种通信方式

a.官方提供的事件bus

var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
 // ...
})

b.通过父组件去找兄弟组件

//找到父组件的$refs对象,然后找到组件的兄弟组件
 var $refs = this.$parent?this.$parent.$refs:{};
 var childComponent = $refs.child; //child为改组件的ref属性值

其实以上两种方法最好的实践方式是封装到项目的基类中,这样不用每次都去定义一个空Vue()实例,而是每个实例的基类中都有这个事件bus。同样可以封装找到其他兄弟组件的方法,但是该兄弟组件必须注册ref

下面这个方法是我在项目中封装的用于找到父组件,然后再去找到兄弟组件的方法。

//平行组件之间的通信
getComponentByRef: function(refId) {
  var $refs = this.$parent?this.$parent.$refs:{};
  for (var $id in $refs) {
    if ($id == refId) {
      return $refs[$id];
    }
  }
  return null;
}

使用

//在组件中直接使用
this.getComponentByRef("booknode").updateNode(this.node);

4.组件间复杂数据通信Vuex

一说到vuex,很多刚开始接触vue的人会主动避免去使用它,其实它并没有想象中的那么复杂。最好的开始是引入vuex后,走一遍给出的小示例。但是如果你的项目并不复杂的话,可以不考虑状态管理,那么什么时候需要使用状态管理呢?

我们来看这样一个布局

Vue组件通信实践记录(推荐)

如果component1中的某个数据变更,那么com2,com3也要跟着更新,此时com3中又细分为了三个小组件。

问题:

  1. 多个试图依赖同一个状态
  2. 多层嵌套的组件,数据变更和代码维护困难

那这样的情况时,我们可以考虑使用状态管理。下一篇文章将详细讲解关于vuex的实践和理解。

写在最后的总结

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于Jquery的跨域传输数据(JSONP)
Mar 10 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
Node.js 制作实时多人游戏框架
Jan 08 Javascript
js+css实现超简洁的二级下拉菜单效果代码
Sep 07 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
JS拖拽排序插件Sortable.js用法实例分析
Feb 20 Javascript
ES6函数实现排它两种写法解析
May 13 Javascript
Vue 打包后相对路径的引用问题
Jun 05 Vue.js
js移动端事件基础及常用事件库详解
Aug 15 #Javascript
js实现移动端轮播图效果
Dec 09 #Javascript
JavaScript递归算法生成树形菜单
Aug 15 #Javascript
JavaScript中附件预览功能实现详解(推荐)
Aug 15 #Javascript
input输入框内容实时监测(附代码)
Aug 15 #Javascript
vue的基本用法与常见指令
Aug 15 #Javascript
vue如何集成raphael.js中国地图的方法示例
Aug 15 #Javascript
You might like
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
php实现的操作excel类详解
2016/01/15 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
纯JavaScript实现的完美渐变弹出层效果代码
2010/04/02 Javascript
基于jquery 的一个progressbar widge
2010/10/29 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
基于JavaScript实现飘落星星特效
2017/08/10 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python中的字典使用分享
2016/07/31 Python
rabbitmq(中间消息代理)在python中的使用详解
2017/12/14 Python
妙用itchat! python实现久坐提醒功能
2019/11/25 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
使用PyQt5实现图片查看器的示例代码
2020/04/21 Python
python如何进入交互模式
2020/07/06 Python
css3圆角样式分享自定义按钮样式
2013/12/27 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
2014/07/02 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
公务员职务工作的自我评价
2013/11/01 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers