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 举办“双向绑定”。

不幸的是，真正的双向绑定会带来维护上的题目，由于子组件可以修改父组件，且在父组件和子组件都没有明明的窜改来历。

（编辑：湖南网）

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