Vue.js组件通信的几种姿势


Posted in Javascript onOctober 23, 2017

写在前面

因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。

文章的原地址: https://github.com/answershuto/learnVue 。

在学习过程中,为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以对其他想学习Vue源码的小伙伴有所帮助。

可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。

什么是Vue组件?

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

Vue组件间通信

父组件向子组件通信

方法一:props

使用 props ,父组件可以使用props向子组件传递数据。

父组件vue模板father.vue

<template>
  <child :msg="message"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  data () {
    return {
      message: 'father message';
    }
  }
}
</script>

子组件vue模板child.vue

<template>
  <div>{{msg}}</div>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  }
}
</script>

方法二 使用$children

使用 $children 可以在父组件中访问子组件。

子组件向父组件通信

方法一:使用 vue事件

父组件向子组件传递事件方法,子组件通过$emit触发事件,回调给父组件。

父组件vue模板father.vue

<template>
  <child @msgFunc="func"></child>
</template>
<script>
import child from './child.vue';
export default {
  components: {
    child
  },
  methods: {
    func (msg) {
      console.log(msg);
    }
  }
}
</script>

子组件vue模板child.vue

<template>
  <button @click="handleClick">点我</button>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  methods () {
    handleClick () {
      //........
      this.$emit('msgFunc');
    }
  }
}
</script>

方法二: 通过修改父组件传递的props来修改父组件数据

这种方法只能在父组件传递一个引用变量时可以使用,字面变量无法达到相应效果。因为饮用变量最终无论是父组件中的数据还是子组件得到的props中的数据都是指向同一块内存地址,所以修改了子组件中props的数据即修改了父组件的数据。

但是并不推荐这么做,并不建议直接修改props的值,如果数据是用于显示修改的,在实际开发中我经常会将其放入data中,在需要回传给父组件的时候再用事件回传数据。这样做保持了组件独立以及解耦,不会因为使用同一份数据而导致数据流异常混乱,只通过特定的接口传递数据来达到修改数据的目的,而内部数据状态由专门的data负责管理。

方法三:使用$parent

使用 $parent 可以访问父组件的数据。

非父子组件、兄弟组件之间的数据传递

非父子组件通信,Vue官方推荐 使用一个Vue实例作为中央事件总线 。

Vue内部有一个事件机制,可以参考 源码 。

$on方法用来监听一个事件。

$emit用来触发一个事件。

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
  //......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.');

多层级父子组件通信:

在Vue1.0中实现了$broadcast与$dispatch两个方法用来向子组件(或父组件)广播(或派发),当子组件(或父组件)上监听了事件并返回true的时候会向爷孙级组件继续广播(或派发)事件。但是这个方法在Vue2.0里面已经被移除了。

之前在学习饿了么的开源组件库 element 的时候发现他们重新实现了broadcast以及dispatch的方法,以mixin的方式引入,具体可以参考 《说说element组件库broadcast与dispatch》 。但是跟Vue1.0的两个方法实现有略微的不同。这两个方法实现了向子孙组件事件广播以及向多层级父组件事件派发的功能。但是并非广义上的事件广播,它需要指定一个commentName进行向指定组件名组件定向广播(派发)事件。

其实这两个方法内部实现还是用到的还是$parent以及$children,用以遍历子节点或是逐级向上查询父节点,访问到指定组件名的时候,调用$emit触发指定事件。

复杂的单页应用数据管理

当应用足够复杂情况下,请使用 vuex 进行数据管理。

总结

以上所述是小编给大家介绍的Vue.js组件通信的几种姿势,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 判断一个元素是否在页面中存在
Dec 27 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
Dec 19 Javascript
日常收藏的jquery技巧
Dec 02 Javascript
微信小程序使用第三方库Underscore.js步骤详解
Sep 27 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
VeeValidate在vue项目里表单校验应用案例
May 09 Javascript
微信小程序的授权实现过程解析
Aug 02 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 #Javascript
JavaScript之创意时钟项目(实例讲解)
Oct 23 #Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 #Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 #Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 #Javascript
利用pm2部署多个node.js项目的配置教程
Oct 22 #Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 #Javascript
You might like
php,ajax实现分页
2008/03/27 PHP
ThinkPHP php 框架学习笔记
2009/10/30 PHP
PHP的范围解析操作符(::)的含义分析说明
2011/07/03 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
curl和libcurl的区别简介
2015/07/01 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
javaScript call 函数的用法说明
2010/04/09 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
python 多进程通信模块的简单实现
2014/02/20 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python 加密与解密小结
2018/12/06 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
python3图片文件批量重命名处理
2019/10/31 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python中数字是否为可变类型
2020/07/08 Python
python logging模块的使用
2020/09/07 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
Django后端按照日期查询的方法教程
2021/02/28 Python
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
承诺书怎么写
2014/03/26 职场文书
2014司机年终工作总结
2014/12/05 职场文书
地道战观后感300字
2015/06/04 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android