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 相关文章推荐
jquery trim() 功能源代码
Feb 14 Javascript
jQuery调用WebService的实现代码
Jun 19 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
Sep 06 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
微信小程序动态添加分享数据
Jun 14 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
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
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
基于GD2图形库的PHP生成图片缩略图类代码分享
2015/02/08 PHP
关于PHP 如何用 curl 读取 HTTP chunked 数据
2016/02/26 PHP
thinkPHP模板算术运算相关函数用法分析
2016/07/12 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
js仿京东轮播效果 选项卡套选项卡使用
2017/01/12 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
Python内建数据结构详解
2016/02/03 Python
python使用writerows写csv文件产生多余空行的处理方法
2019/08/01 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
互动出版网:专业书籍
2017/03/21 全球购物
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
自我评价如何写好?
2014/01/05 职场文书
学生思想表现的评语
2014/01/30 职场文书
优秀毕业生自我鉴定
2014/02/11 职场文书
初三学习决心书
2014/03/11 职场文书
食品安全承诺书
2014/05/22 职场文书
企业宣传口号
2014/06/12 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
国王的演讲观后感
2015/06/03 职场文书
与死神共舞观后感
2015/06/15 职场文书
总经理年会致辞
2015/07/29 职场文书
浅析NIO系列之TCP
2021/06/15 Java/Android