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

2023-09-06 11:35:06 235

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

自己先想一分钟。

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

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

概述

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

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

详述

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

1.Prop

英式发音：[prɒp]。这个在我们日常开发当中用到的非常多。简单来说，我们可以通过Prop向子组件传递数据。用一个形象的比喻来说，父子组件之间的数据传递相当于自上而下的下水管子，只能从上往下流，不能逆流。这也正是Vue的设计理念之单向数据流。而Prop正是管道与管道之间的一个衔接口，这样水（数据）才能往下流。说这么多，看代码：

//Js letChild=Vue.extend({ template:'

', props:{ content:{ type:String, default:()=>{return'fromchild'} } } }) newVue({ el:'#app', data:{ message:'fromparent' }, components:{ Child } })

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

fromparent

2.$emit

英式发音：[iˈmɪt]。官方说法是触发当前实例上的事件。附加参数都会传给监听器回调。按照我的理解不知道能不能给大家说明白，先简单看下代码吧：

letMyButton=Vue.extend({ template:'click', data(){ return{ greeting:'vue.js!' } }, methods:{ triggerClick(){ this.$emit('greet',this.greeting) } } }) newVue({ el:'#app', components:{ MyButton }, methods:{ sayHi(val){ alert('Hi,'+val)//'Hi,vue.js!' } } })

你可以狠狠的戳这里查看Demo!大致逻辑是酱婶儿的：当我在页面上点击按钮时，触发了组件MyButton上的监听事件greet，并且把参数传给了回调函数sayHi。说白了，当我们从子组件Emit（派发）一个事件之前，其内部都提前在事件队列中On（监听）了这个事件及其监听回调。其实相当于下面这种写法：

vm.$on('greet',functionsayHi(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进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。

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

于是我们可以用.sync语法糖简写成如下形式：

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


{{userName}}

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

{{content}}

{{foo}}

parentfoo

son

child

随机推荐

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

{{content}}

{{foo}}

parentfoo

son

child

热门推荐

随机推荐