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

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

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

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

面试官:Vue 中父子组件通信有哪些方式?

自己先想一分钟。

无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多。

真的是前端开发人员必备技能。

而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题。

最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来。

真的是无规范不成方圆,规范这个东西太重要了!

有点扯了,回到主题,咳咳,那就谈谈我对上面的面试题的理解吧,文笔有限,不妥之处,欢迎在文章结尾留言斧正啊,正啊,啊!

概述

几种通信方式无外乎以下几种:

  • Prop(常用)
  • $emit (组件封装用的较多)
  • .sync语法糖 (较少)
  • $attrs 和 $listeners (组件封装用的较多)
  • provide 和 inject (高阶组件/组件库用的较多)
  • 其他方式通信

详述

下面逐个介绍,大神请绕行。

1. Prop

英式发音:[prɒp]。

这个在我们日常开发当中用到的非常多。

简单来说,我们可以通过 Prop 向子组件传递数据。

用一个形象的比喻来说,父子组件之间的数据传递相当于自上而下的下水管子,只能从上往下流,不能逆流。

这也正是 Vue 的设计理念之单向数据流。

而 Prop 正是管道与管道之间的一个衔接口,这样水(数据)才能往下流。说这么多,看代码:

  1. <div id="app">  <child :content="message"></child></div> 
  2. // Js 
  3. let Child = Vue.extend({ 
  4.   template: '<h2>{{ content }}</h2>', 
  5.   props: { 
  6.     content: { 
  7.       type: String, 
  8.       default: () => { return 'from child' } 
  9.     } 
  10.   } 
  11. }) 
  12.  
  13. new Vue({ 
  14.   el: '#app', 
  15.   data: { 
  16.     message: 'from parent' 
  17.   }, 
  18.   components: { 
  19.     Child 
  20.   } 
  21. }) 
 

浏览器输出:

  1. from parent 

2. $emit

英式发音:[iˈmɪt]。

官方说法是触发当前实例上的事件。

附加参数都会传给监听器回调。

按照我的理解不知道能不能给大家说明白,先简单看下代码吧:

  1. <div id="app">  <my-button @greet="sayHi"></my-button></div> 
  2. let MyButton = Vue.extend({ 
  3.   template: '<button @click="triggerClick">click</button>', 
  4.   data () { 
  5.     return { 
  6.       greeting: 'vue.js!' 
  7.     } 
  8.   }, 
  9.   methods: { 
  10.     triggerClick () { 
  11.       this.$emit('greet', this.greeting) 
  12.     } 
  13.   } 
  14. }) 
  15.  
  16. new Vue({ 
  17.   el: '#app', 
  18.   components: { 
  19.     MyButton 
  20.   }, 
  21.   methods: { 
  22.     sayHi (val) { 
  23.       alert('Hi, ' + val) // 'Hi, vue.js!' 
  24.     } 
  25.   } 
  26. }) 

大致逻辑是酱婶儿的:当我在页面上点击按钮时,触发了组件 MyButton 上的监听事件 greet,并且把参数传给了回调函数 sayHi 。

说白了,当我们从子组件 Emit(派发) 一个事件之前,其内部都提前在事件队列中 On(监听)了这个事件及其监听回调。其实相当于下面这种写法:

  1. vm.$on('greet', function sayHi (val) {  console.log('Hi, ' + val)})vm.$emit('greet', 'vue.js')// => "Hi, vue.js" 

3. .sync 修饰符

这个家伙在 vue@1.x 的时候曾作为双向绑定功能存在,即子组件可以修改父组件中的值。

因为它违反了单向数据流的设计理念,所以在 vue@2.0 的时候被干掉了。

但是在 vue@2.3.0+ 以上版本又重新引入了这个 .sync 修饰符。

但是这次它只是作为一个编译时的语法糖存在。

它会被扩展为一个自动更新父组件属性的 v-on 监听器。

说白了就是让我们手动进行更新父组件中的值了,从而使数据改动来源更加的明显。

下面引入自官方的一段话:

在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。

不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。

(编辑:核心网)

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

热点阅读