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 相关文章推荐
javascript中的事件代理初探
Mar 08 Javascript
Javascript图片上传前的本地预览实例
Jun 16 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
各式各样的导航条效果css3结合jquery代码实现
Sep 17 Javascript
完美解决IE不支持Data.parse()的问题
Nov 24 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
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+javascript实现二级级联菜单的制作
2008/05/06 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
[原创]php实现 data url的图片生成与保存
2016/12/04 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
nodejs实现简单的gulp打包
2017/12/21 NodeJs
解决vue addRoutes不生效问题
2020/08/04 Javascript
python中使用enumerate函数遍历元素实例
2014/06/16 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python ddt实现数据驱动
2018/03/14 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
学习心得体会
2014/01/01 职场文书
入学申请自荐信范文
2014/02/26 职场文书
葬礼司仪主持词
2014/03/31 职场文书
《数星星的孩子》教学反思
2014/04/11 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
医德医风个人总结
2015/02/28 职场文书
教师节随笔
2015/08/15 职场文书
爱岗敬业先进典型事迹材料(2016推荐版)
2016/02/26 职场文书
创业计划书之寿司
2019/07/19 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技