加入收藏 | 设为首页 | 会员中心 | 我要投稿 南京站长网 (https://www.025zz.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 网站设计 > 教程 > 正文

Vue.js 父子组件通信的十种方式

发布时间:2019-06-04 10:10:45 所属栏目:教程 来源:gongph
导读:副标题#e# 面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟。 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多。 真的是前端开发人员必备技能。 而且在面试当中也往往会问到关于 Vue

下面是实现 EventBus 的简单代码:

  •  
  1. <div id="app">  <child></child></div> 
  2. // 全局变量 
  3. let EventBus = new Vue() 
  4.  
  5. // 子组件 
  6. let Child = Vue.extend({ 
  7.   template: '<h2>child</h2>', 
  8.   created () { 
  9.     console.log(EventBus.message) 
  10.     // -> 'hello' 
  11.     EventBus.$emit('received', 'from child') 
  12.   } 
  13. }) 
  14.  
  15. new Vue({ 
  16.   el: '#app', 
  17.   components: { 
  18.     Child 
  19.   }, 
  20.   created () { 
  21.     // 变量保存 
  22.     EventBus.message = 'hello' 
  23.     // 事件监听 
  24.     EventBus.$on('received', function (val) { 
  25.       console.log('received: '+ val) 
  26.       // -> 'received: from child' 
  27.     }) 
  28.   } 
  29. }) 
  • Vuex

官方推荐的,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

  • $parent

父实例,如果当前实例有的话。

通过访问父实例也能进行数据之间的交互,但极小情况下会直接修改父组件中的数据。

  • $root

当前组件树的根 Vue 实例。

如果当前实例没有父实例,此实例将会是其自己。

通过访问根组件也能进行数据之间的交互,但极小情况下会直接修改父组件中的数据。

  • broadcast / dispatch

他俩是 vue@1.0 中的方法,分别是事件广播 和 事件派发。

虽然 vue@2.0 里面删掉了,但可以模拟这两个方法。

可以借鉴 Element 实现。

有时候还是非常有用的,比如我们在开发树形组件的时候等等。

总结

啰嗦了这么多,希望看到的同学或多或少有点收获吧。

不对的地方还请留言指正,不胜感激。

父子组件间的通信其实有很多种,就看你在哪些情况下去用。

不同场景不同对待。

前提是你要心中有数才行!

通过大神之路还有很远,只要每天看看社区,看看文档,写写Demo,每天进步一点点,总会有收获的。

(编辑:南京站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读