【前端知识之Vue】Vue组件间的通信方式

饭啊饭°

已于 2022-07-18 09:16:21 修改

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识之Vue 文章标签： vue.js 前端 javascript

于 2022-06-20 14:24:51 首次发布

本文链接：https://blog.csdn.net/weixin_44337386/article/details/125366659

本文主要探讨前端面试中常见的Vue组件通信方式，包括props、$emit、ref、EventBus、$parent/$root以及Vuex的使用，详细阐述了各种场景下的通信策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue组件间的通信方式。

一、组件间的通信方式分类

父子组件之间的通信；
兄弟组件之间的通信；
祖孙与后代组件之间的通信；
非关系组件之间的通信。

在这里插入图片描述

二、props传递数据

适用场景：父组件传递数据给子组件；
子组件设置props属性，定义接收父组件传递过来的参数；
父组件在使用子组件标签中通过字面量来传递值

Person.vue

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>

<script>
import Student1 from './Student1'

export default {
     
     
    name: 'Person',
    components: {
     
     
        Student1,
    },
</script>

Student1.vue

<template>
  <div>
    Student1
    {
  
  {name}},{
  
  {age}}
  </div>
</template>

<script>
export default {
     
     
    name: 'Student1',
    props: {
     
     
        name: String,