前端经典面试题 | Vue组件间的通信方式

🖥️ 前端经典面试题专栏：前端经典面试题 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来实现,他创建了一个 中心点 可以用它来传递事件和接收