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
}
})
你可以狠狠的戳这里查看Demo!浏览器输出:
from parent
2. $emit
英式发音:[iˈmɪt]。官方说法是 触发当前实例上的事件。附加参数都会传给监听器回调 。按照我的理解不知道能不能给大家
说明白,先简单看下代码吧:
<div id="app">
<my-button @greet="sayHi"></my-button>
</div>
let MyButton = Vue.extend({