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

最新推荐文章于 2024-05-21 23:21:19 发布

coderHing[专注前端]

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量2.7k

点赞数 3

分类专栏：前端面试题-吊打面试官系列文章标签：前端 vue.js javascript 前端框架 es6

本文链接：https://blog.csdn.net/coderHing/article/details/127716173

版权

前端面试题-吊打面试官系列专栏收录该内容

12 篇文章 23 订阅

订阅专栏

🖥️ 前端经典面试题专栏：前端经典面试题 Vue组件间的通信方式
🧑‍💼 个人简介：一个不甘平庸的平凡人🍬

✨ 个人主页：CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

eventBus 事件总线($emit/$on)

一、回答点

普遍的说三四个即可父/子 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']