前端经典面试题 | 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: '父组件数据'
    }
  },
  met