import son from “./son.vue”;
export default {
name: father,
data() {
msgData: “父组件数据”;
},
methods: {
myFunction() {
console.log(“vue”);
}
},
components: {
son
}
};
子组件:
// 子组件
{{msg}}
<button @click=“fn”>按钮
## 2.子组件向父组件传递数据($emit的用法)
**$emit的特点:**
* $emit 绑定一个自定义事件,当这个事件被执行的时候就会将参数传递给父组件,而父组件通过v-on监听并接收参数
**用法:**
父组件:
// 父组件
子组件:
//子组件
## 3.兄弟组件通信
兄弟组件通信可以借助父组件交互
A组件 B组件
1. A组件数据传递给共同的父组件 再有父组件接受后传递给B组件
2. 通过 $parent + $refs 以父组件为中间人来获取到兄弟组件,也可以进行通信。
## 4、ref / $refs
这种方式也是实现父子组件之间的通信
ref:这个属性用在子组件上,它的用用就指向了子组件的实例,可以通过实例来访问组件的数据和方法
**用法:**
**在子组件中:**
export default {
data () {
return {
name: ‘JavaScript’
}
},
methods: {
sayHello () {
console.log(‘hello’)
}
}
}
**在父组件中:**
调用子组件使用ref 获取子组件实例
## 5、eventBus事件总线($emit / $on)
eventBus事件总线适用于**父子组件、非父子组件**等之间的通信,使用步骤如下:
vue事件总线([eventBus](https://bbs.csdn.net/topics/618166371)),通过创建一个空的vue实例作为全局事件总线,用它来触发事件和监听事件,从而实现任何组件间的通信,包括父子、隔代、兄弟组件
**(1)创建事件中心管理组件之间的通信**
// main.js
Vue.prototype.
b
u
s
=
n
e
w
V
u
e
(
)
/
/
c
h
i
l
d
2
t
h
i
s
.
bus = new Vue() // child2 this.
bus=newVue()//child2this.bus.
e
m
i
t
(
′
b
u
s
′
,
′
b
u
s
传值
,
组件
2
传过来
的
′
)
/
/
c
h
i
l
d
2
t
h
i
s
.
emit('bus', 'bus传值,组件2传过来的') // child2 this.
emit(′bus′,′bus传值,组件2传过来的′)//child2this.bus.$on(‘bus’, (msg)=> {
console.log(‘msg’, msg)
})
**(2)发送事件 假设有两个组件home About**
![](https://img-blog.csdnimg.cn/ecc67ca7f8234b638c5efff45c405b62.png)
![](https://img-blog.csdnimg.cn/ba3585f6ed8a4cc6b591d3ce6aa8c70f.png)
**(3)接收事件**
![](https://img-blog.csdnimg.cn/2d8d29254afc47edb7ca0a5285a1a467.png)
在上述代码中,这就相当于将count值存贮在了事件总线中,在其他组件中可以直接访问。事件总线就相当于一个桥梁,不用组件通过它来通信。虽然看起来比较简单,但是这种方法也有不变之处,如果项目过大,使用这种方式进行通信,**后期维护起来会很困难**。
**vue3不再使用 废除了**
## 6、依赖注入(provide / inject)
这种方式就是vue中依赖注入,该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子,也可以是祖孙组件,在层数很深的情况下,可以使用这种方式来进行传值。就不用一层一层的传递数据了。
provide和inject是vue提供的两个钩子,和data、methods是同级的。并且provide的书写形式和data一样。
provide 钩子用来发送数据或方法。
inject钩子用来接收数据或方法
用法:
父组件中:
provide() {
return {
num: this.num
};
}
子组件中:
inject: [‘num’]
还有另一种写法,这种写法可以访问父组件中的所有属性:
provide() {
return {
app: this
};
}
data() {
return {
num: 1
};
}
inject: [‘app’]
console.log(this.app.num)
### 7.$parent / $children
* 使用$parent可以让组件访问父组件的实例(访问的是上一级父组件的属性和方法)。
* 使用 $children 可以让组件访问子组件的实例,但是, $children 并不能保证顺序,并且访问的数据也不是响应式的。
**用法:**
子组件中:
获取父组件的值为: {{parentVal}}
## 8. $children
### 最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/ebac2ab824bae173dc22054a17212598.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)