vue2组件通信有哪几种方式？

最新推荐文章于 2025-12-05 20:35:03 发布

原创最新推荐文章于 2025-12-05 20:35:03 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js #es6

Vue2 专栏收录该内容

22 篇文章

订阅专栏

本文详细探讨了Vue.js中的父子组件通信机制，包括使用props和$emit进行数据传递，this.$parent的使用，以及ref和refs的管理。同时，还介绍了如何对props进行类型、非空、默认值和自定义验证。此外，文章还涵盖了非父子组件间的依赖注入和事件总线(eventbus)的实现。

文章目录

一、父子通信
二、props校验(类型、非空、默认值、自定义)
三、非父子通信
- 1.provide&inject（依赖和注入）
- 2.eventbus（事件总线）

一、父子通信

1.props和$emit

2.this.$parent

3.ref和refs

二、props校验(类型、非空、默认值、自定义)

props:{
  属性名：{
    type：类型,//Number,String,Boolean,Function,Object,Array
    required:true,//是否必填
    default:默认值,
    validator（value）{
      //value就是传过来的值
      if(value>0 && value<=100){
        return true
      }else{
          return false
      }
      
    }
  }
}