Vue.js 父子组件通讯的1212种方式

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

本身先想一分钟。

无能否认，如今不管大厂仍是小厂都已经用上了 Vue.js 框架，简单易上手不说，教程详尽，社区活跃，第三方套件还多。真的是前端开发人员必备技能。并且在面试当中也每每会问到关于 Vue 方面的各类问题，其中大部分面试官会问到如上这种问题。

最近一直在作 Vue项目代码层面上的优化，说实话，优化别人的代码真是件痛苦的事情，功能实现尚且不说，就说代码规范我就能再写出一篇文章来。真的是无规范不成方圆，规范这个东西过重要了！有点扯了，回到主题，咳咳，那就谈谈我对上面的面试题的理解吧，文笔有限，不妥之处，欢迎在文章结尾留言斧正啊，正啊，啊！

清单

几种通讯方式无外乎如下几种：

• Prop（经常使用）
• $emit (组件封装用的较多)
• .sync语法糖 （较少）
• $attrs & $listeners (组件封装用的较多)
• provide & inject （高阶组件/组件库用的较多）
• slot-scope & v-slot （vue@2.6.0+）新增
• scopedSlots 属性
• 其余方式通讯

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

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
  }
})
复制代码

你能够狠狠的戳这里查看Demo！浏览器输出：

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!'
    }
  }
})
复制代码

你能够狠狠的戳这里查看Demo! 大体逻辑是酱婶儿的：当我在页面上点击按钮时，触发了组件 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 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，由于子组件能够修改父组件，且在父组件和子组件都没有明显的改动来源。

既然做为一个语法糖，确定是某种写法的简写形式，哪一种写法呢，看代码：

<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event">
</text-document>
复制代码

因而咱们能够用 .sync 语法糖简写成以下形式：

<text-document v-bind:title.sync="doc.title"></text-document>
复制代码

废话这么多，如何作到“双向绑定” 呢？让咱们进段广告，广告以后更加精彩！ ... 好的，欢迎回来。假如咱们想实现这样一个效果：改变子组件文本框中的值同时改变父组件中的值。怎么作？列位不妨先想一想。先看段代码：

<div id="app">
  <login :name.sync="userName"></login> {{ userName }}
</div>
复制代码

let Login = Vue.extend({
  template: ` <div class="input-group"> <label>姓名:</label> <input v-model="text"> </div> `,
  props: ['name'],
  data () {
    return {
      text: ''
    }
  },
  watch: {
    text (newVal) {
      this.$emit('update:name', newVal)
    }
  }
})

new Vue({
  el: '#app',
  data: {
    userName: ''
  },
  components: {
    Login
  }
})
复制代码

你能够狠狠的戳这里查看Demo!下面划重点，代码里有这一句话：

this.$emit('update:name', newVal)
复制代码

官方语法是：update:myPropName 其中 myPropName 表示要更新的 prop 值。固然若是你不用 .sync 语法糖使用上面的 .$emit 也能达到一样的效果。仅此而已！

4. $attrs & $listeners

• 官网对 $attrs 的解释以下：

包含了父做用域中不做为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含全部父做用域的绑定 (class 和 style 除外)，而且能够经过 v-bind="$attrs" 传入内部组件——在建立高级别的组件时很是有用。

• 官网对 $listeners 的解释以下：

包含了父做用域中的 (不含 .native 修饰器的) v-on 事件监听器。它能够经过 v-on="$listeners" 传入内部组件——在建立更高层次的组件时很是有用。

我以为 $attrs 和 $listeners 属性像两个收纳箱，一个负责收纳属性，一个负责收纳事件，都是以对象的形式来保存数据。看下面的代码解释：

<div id="app">
  <child :foo="foo" :bar="bar" @one.native="triggerOne" @two="triggerTwo">
  </child>
</div>
复制代码

从 Html 中能够看到，这里有俩属性和俩方法，区别是属性一个是 prop 声明，事件一个是 .native 修饰器。

let Child = Vue.extend({
  template: '<h2>{{ foo }}</h2>',
  props: ['foo'],
  created () {
    console.log(this.$attrs, this.$listeners)
    // -> {bar: "parent bar"}
    // -> {two: fn}
    
    // 这里咱们访问父组件中的 `triggerTwo` 方法
    this.$listeners.two()
    // -> 'two'
  }
})

new Vue({
  el: '#app',
  data: {
    foo: 'parent foo',
    bar: 'parent bar'
  },
  components: {
    Child
  },
  methods: {
    triggerOne () {
      alert('one')
    },
    triggerTwo () {
      alert('two')
    }
  }
})
复制代码

你能够狠狠的戳这里查看Demo! 能够看到，咱们能够经过 $attrs 和 $listeners 进行数据传递，在须要的地方进行调用和处理，仍是很方便的。固然，咱们还能够经过 v-on="$listeners" 一级级的往下传递，子子孙孙无穷尽也！

一个插曲！

当咱们在组件上赋予了一个非Prop 声明时，编译以后的代码会把这些个属性都当成原始属性对待，添加到 html 原生标签上，看上面的代码编译以后的样子：

<h2 bar="parent bar">parent foo</h2>
复制代码

这样会很难看，同时也爆了某些东西。如何去掉？这正是 inheritAttrs 属性的用武之地！给组件加上这个属性就好了，通常是配合 $attrs 使用。看代码：

// 源码
let Child = Vue.extend({
  ...
  inheritAttrs: false, // 默认是 true
  ...
})
复制代码

再次编译：

<h2>parent foo</h2>
复制代码

5. provide & inject

他俩是对CP, 感受挺神秘的。来看下官方对 provide / inject 的描述：

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。而且这对选项须要一块儿使用，以容许一个祖先组件向其全部子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

看完描述有点懵懵懂懂！一句话总结就是：小时候你老爸什么东西都先帮你存着等你长大该娶媳妇儿了你要房子给你买要车给你买只要他有的尽可能都会知足你。下面是这句话的代码解释：

<div id="app">
  <son></son>
</div>
复制代码

let Son = Vue.extend({
  template: '<h2>son</h2>',
  inject: {
    house: {
      default: '没房'
    },
    car: {
      default: '没车'
    },
    money: {
      // 长大工做了虽然有点钱
      // 仅供生活费，须要向父母要
      default: '￥4500'
    }
  },
  created () {
    console.log(this.house, this.car, this.money)
    // -> '房子', '车子', '￥10000'
  }
})

new Vue({
  el: '#app',
  provide: {
    house: '房子',
    car: '车子',
    money: '￥10000'
  },
  components: {
    Son
  }
})
复制代码

你能够狠狠的戳这里查看Demo!

6. slot-scope & v-slot

关于这种方式的介绍，请看我这篇文章的介绍。传送门->

7. scopedSlots 属性

关于这种方式的介绍，请看我这篇文章的介绍。传送门->

8. 其余方式通讯

除了以上五种方式外，其实还有：

• EventBus

思路就是声明一个全局Vue实例变量 EventBus , 把全部的通讯数据，事件监听都存储到这个变量上。能够阅读使用Event Bus进行Vue组件间通讯了解更多。这样就达到在组件间数据共享了，有点相似于 Vuex。但这种方式只适用于极小的项目，复杂项目仍是推荐 Vuex。下面是实现 EventBus 的简单代码：

<div id="app">
  <child></child>
</div>
复制代码

// 全局变量
let EventBus = new Vue()

// 子组件
let Child = Vue.extend({
  template: '<h2>child</h2>',
  created () {
    console.log(EventBus.message)
    // -> 'hello'
    EventBus.$emit('received', 'from child')
  }
})

new Vue({
  el: '#app',
  components: {
    Child
  },
  created () {
    // 变量保存
    EventBus.message = 'hello'
    // 事件监听
    EventBus.$on('received', function (val) {
      console.log('received: '+ val)
      // -> 'received: from child'
    })
  }
})
复制代码

你能够狠狠的戳这里查看Demo!

• Vuex

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

• $parent

父实例，若是当前实例有的话。经过访问父实例也能进行数据之间的交互，但极小状况下会直接修改父组件中的数据。

• $root

当前组件树的根 Vue 实例。若是当前实例没有父实例，此实例将会是其本身。经过访问根组件也能进行数据之间的交互，但极小状况下会直接修改父组件中的数据。

• broadcast / dispatch

他俩是 vue@1.0 中的方法，分别是事件广播 和 事件派发。虽然 vue@2.0 里面删掉了，但能够模拟这两个方法。能够借鉴 Element 实现。有时候仍是很是有用的，好比咱们在开发树形组件的时候等等。

总结

啰嗦了这么多，但愿看到的同窗或多或少有点收获吧。不对的地方还请留言指正，不胜感激。父子组件间的通讯其实有不少种，就看你在哪些状况下去用。不一样场景不一样对待。前提是你要心中有数才行！经过大神之路还有很远，只要天天看看社区，看看文档，写写Demo，天天进步一点点，总会有收获的。俗话说，三人行则必有我师，但愿更多志同道合的小伙伴能聚在一块儿交流技术！下面的群快满了，能够加我 Q1769617251 。备注 vue 便可。