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

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

自己先想一分钟。

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

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

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

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

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

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

概述

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

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

详述

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

1. Prop

英式发音：[prɒp]。

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

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

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

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

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

<div id="app">  <child :content="message"></child></div> 
// Js 
let Child = Vue.extend({ 
  template: '<h2>{{ content }}</h2>', 
  props: { 
    content: { 
      type: String, 
      default: () => { return 'from child' } 
    } 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  data: { 
    message: 'from parent' 
  }, 
  components: { 
    Child 
  } 
}) 

浏览器输出：

from parent 

2. $emit

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

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

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

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

<div id="app">  <my-button @greet="sayHi"></my-button></div> 
let MyButton = Vue.extend({ 
  template: '<button @click="triggerClick">click</button>', 
  data () { 
    return { 
      greeting: 'vue.js!' 
    } 
  }, 
  methods: { 
    triggerClick () { 
      this.$emit('greet', this.greeting) 
    } 
  } 
}) 
 
new Vue({ 
  el: '#app', 
  components: { 
    MyButton 
  }, 
  methods: { 
    sayHi (val) { 
      alert('Hi, ' + val) // 'Hi, vue.js!' 
    } 
  } 
}) 

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

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

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 进行“双向绑定”。

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

（编辑：青岛站长网）

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