🖥️ 前端经典面试题专栏：前端经典面试题 Vue组件间的通信方式
🧑💼 个人简介：一个不甘平庸的平凡人🍬✨ 个人主页：CoderHing的个人主页
🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️
👉 你的一键三连是我更新的最大动力❤️
目录
一、回答点
二、深入回答
props/$emit
父组件向子组件传值
eventBus 事件总线($emit/$on)
依赖注入Provide / inject
ref/$refs
$parent/ $children
$attrs/$listeners
三、总结及归纳
父子组件的通信
兄弟组件的通信
任意组件之间
一、回答点
普遍的 说 三四个即可 父/子 props/emit eventBus provide/ inject 等..
二、深入回答
props/$emit
简述: 父组件通过 props 向子组件传递数据,子组件通过 $emit 和父组件通信
-
父组件向子组件传值
- props 只能由父组件对子组件进行传值, 使得父子组件之间形成一个单向绑定.子组件的数据会随着父组件不断的更新
- props 可以定义一个以上(包括一个)的数据,对于子组件接收的数据,可以是各种数据类型,也可以传递一个函数
- 代码展示
<!-- 父组件 -->
<template>
<div class="father">
<son :msg="msg" :fn="fatherFunction" />
</div>
</template>
<script>
import son from './sons.vue'
export default {
name: 'FatherPage',
components: {
son
},
data() {
return {
msg: '父组件数据'
}
},
methods: {
fatherFunction() {
console.log('fatherPage')
}
}
}
</script><!-- 子组件 -->
<template>
<div class="son">
<p>父组件传递过来的值:{{ msg }}</p>
<button @click="fn">按钮</button>
</div>
</template>
<script>
export default {
name: 'Son',
props: ['msg', 'fn']
}
</script>- 子组件向父组件传值
- $emit 绑定一个自定义事件,当这个事件被触发时会将参数传递给父组件 而父组件通过 v-on 或语法糖(@) 监听并接收参数
- 代码展示
<!-- 父组件 -->
<template>
<div class="father">
<son @clickSon="clickSonMsg" />
</div>
</template>
<script>
import son from './sons.vue'
export default {
name: 'FatherPage',
components: {
son
},
methods: {
clickSonMsg() {
console.log('子组件传递过来点击信息')
}
}
}
</script><!-- 子组件 -->
<template>
<div class="son">
<button @click="sonClick">告诉父亲被打了!</button>
</div>
</template>
<script>
export default {
name: 'SonPage',
methods: {
sonClick() {
this.$emit('clickSonMsg')
}
}
}
</script>eventBus 事件总线($emit/$on)
简述:eventBus事件总线 适合 父子组件|非父子组件等之间的通信,使用步骤如下:
- 创建事件中心管理组件之间的通信
- 发送事件
- 接收事件
依赖注入Provide / inject
简述: Vue中的依赖注入,用于 父子组件之间通信,也可用于 祖孙组件之间的通信,在层级很深的情况下,使用这种方式进行传值.
provide / inject 是Vue提供的两个钩子函数 和 data methods 是同级的 并且 provide书写跟data是一样的.
- provide 是用来发送数据/方法
- inject 用来接收数据/方法
- 需要注意的是 依赖注入提供的属性 都 不是响应式的
- 代码展示
// 在父组件中:
provide() {
return {
num: this.num
}
}
// 在子组件中:
inject: ['num']ref/$refs
简述:也是实现 父子组件 之间的通信
- ref:用在子组件上,它的引用指向了子组件的实例. 可以通过实例来访问组件的数据和方法..
$parent/ $children
- $parent 可以让组件访问父组件的实例(上一级组件的属性和方法)
- $children 可以让组件访问子组件的实例,注: 它并不能保证 子组件的顺序,并且访问的数据 不是响应式数据
$attrs/$listeners
简述: Vue引入了它们两个 可以实现 跨组件跨代通信
- $attrs: 继承所有的父组件属性(除了prop传递的属性 class style),常用于 子组件的元素上
- $listeners: 它是一个对象,包含了 作用在这个组件上的所有监听器,配合v-on=$listeners,将所有的事件监听器指向这个组件的某个特定的元素.
三、总结及归纳
父子组件的通信
- 子组件通过 props 来接收父组件传递过来的数据, 父组件在子组件上 注册监听事件,子组件通过 $emit触发事件 向 父组件发送数据.
- 通过ref属性给子组件设置名字,父组件通过$refs=组件名来获取子组件实例,子组件通过$parent获得父组件,这样也可以实现通信.
- 使用provide/inject , 在父组件中 通过 provide提供变量, 子组件中通过inject将变量注入到组件中,不论层级有多深,只要调用了inject 就可以注入 provide中的数据
兄弟组件的通信
- eventBus方法,它本质是通过 创建一个空的Vue实例来作为消息传递的对象, 通信组件 引入这个实例,通过这个实例来监听和触发时间,实现传递
- 通过$parent/$refs 来获取到兄弟组件 也可以进行通信
任意组件之间
- 还是通过eventBus来实现,他创建了一个 中心点 可以用它来传递事件和接收
