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

最新推荐文章于 2024-07-16 17:18:30 发布
最新推荐文章于 2024-07-16 17:18:30 发布
阅读量232 收藏
点赞数 1
分类专栏： Vue2 文章标签： 前端 javascript vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jolly_zhang/article/details/135890198
版权
本文详细探讨了Vue.js中的父子组件通信机制，包括使用props和$emit进行数据传递，this.$parent的使用，以及ref和refs的管理。同时，还介绍了如何对props进行类型、非空、默认值和自定义验证。此外，文章还涵盖了非父子组件间的依赖注入和事件总线(eventbus)的实现。
摘要由CSDN通过智能技术生成

文章目录

一、父子通信

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
      }
      
    }
  }
}

三、非父子通信

1.provide&inject（依赖和注入）

2.eventbus（事件总线）

Jolly_zhang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.js组件通信的几种姿势
10-19
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。下面通过本文给大家分享Vue.js组件通信的几种姿势，感兴趣的朋友一起看看吧
vue中组件通信的八种方式（值得收藏！）
10-16
本文将详细阐述Vue组件间通信的八种方式，并结合实例说明它们的适用场景。 1. **Props / $emit** - **父组件向子组件传值**：通过在父组件模板中使用`props`属性将数据绑定到子组件的属性上。例如，父组件`section...
Vue2中10种组件通信方式和实践技巧
qq_40147756的博客
09-21 1366
Vue2中10种组件通信方式和实践技巧
Vue2组件间通信的14种方式详解
weixin_45655820的博客
08-30 996
v-model 是用来在表单控件或者组件上创建双向绑定的，他的本质是 v-bind 和 v-on 的语法糖，在一个组件上使用 v-model，默认会为组件绑定名为 value 的 prop 和名为 input 的事件。通过这种方式，虽然可以实现通信，但在应用的任何部分，任何时间发生的任何数据变化，都不会留下变更的记录，这对于稍复杂的应用来说，调试是致命的，不建议在实际应用中使用。getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算。
Vue2常用的组件通信方式有几种
Jarvan_I的博客
05-21 464
通过创建一个事件总线（Event Bus）来实现兄弟组件之间的通信。通过在父组件中使用属性（Props）传递数据给子组件。使用 Vuex 管理全局状态，实现任意组件之间的通信。提供和注入属性来实现祖先和后代之间的通信。3. 兄弟组件通信（Event Bus）触发自定义事件，父组件监听并响应。1. 父子组件通信（Props）2. 子父组件通信（$emit）Vue2 组件通信方式详解。4. Vuex 状态管理。
Vue2组件通信的方式
Miller777_的博客
03-15 1492
（1）父子组件间通信子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。通过 ref 属性给子组件设置一个名字。父组件通过$refs组件名来获得子组件，子组件通过$parent获得父组件，这样也可以实现通信。使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。
Vue2组件通信方式
codingLeader的博客
04-26 3031
Vue2组件通信方式 Vue父子、兄弟、父孙之间通信方式
vue2面试题：vue组件之间的通信方式有哪些？
laowang357的博客
01-24 1271
1.适用场景：子组件传递数据给父组件2.子组件通过$emit触发自定义事件，$emit第二个参数为传递的值3.父组件绑定监听器获取到子组件传过来的参数。
详解vue跨组件通信的几种方法
08-30
以下是跨组件通信的几种方法： 一、 Props 双向绑定 Props 是 Vue 中组件间通信的基本方式。通过在父组件中定义 props，并在子组件中使用 props，实现组件间的数据传递。双向绑定是指在父组件中定义一个变量，并将...
Vue组件通信的几种实现方法
12-01
一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。 常用的通信手段有两种： 1.ref：给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例。 这...
vue组件间通信六种方式（总结篇）
01-19
前言 组件是 vue.js最强大的功能之一...本文总结了vue组件间通信的几种方式，如props、 $emit / $on 、vuex、 $parent / $children 、 $attrs / $listeners 和provide/inject，以通俗易懂的实例讲述这其中的差别及使用
vue2组件通信的几种方式
jianwei的博客
04-27 312
vue2 组件之前通信
Vue2面试题：说一下组件通信有哪些方式？
m0_74802419的博客
12-13 440
1、$emit + 自定义事件：在父组件中，给子组件绑定一个自定义事件，绑定事件的值为接收参数的函数，在子组件中，通过$emit发送数据。1、$bus 全局事件总线：给vue原型添加一个vue实例，用this.$bus.$emit发送，用this.$bus.$on接收。3、$attrs：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过$attrs进行接收【与props不能共存】1、自定义属性 + props：在父组件中，给子组件绑定一个自定义属性，在子组件中，通过props进行接收。
OpenSNN推文：近期优质博客推荐汇总
opensnn的博客
07-12 381
国内个人博客站点众多，涵盖了技术、生活、艺术等多个领域。
前端技术学习记录-基础知识（二）JavaScript基本语法
adanjeep的博客
07-11 218
/ 声明一个String类型的变量name name = "Alice";// 初始化变量name int age;// 声明一个int类型的变量age age = 25;// 初始化变量age。静态强类型：Java语言，在申明变量时，需要明确定于变量的类型。对明确申明的变量，需要做强制转换，才会发生变化，否则不变。//数字 a = "hahaha";//字符串 </script>动态弱类型语言：变量可以存放在不同类型的值（动态）=== 比较相等（不会进行隐式类型转换）>>> 无符号右移（逻辑右移）
更新商品前端接口编写
weixin_55639995的博客
07-12 404
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1102
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
微信小程序开发笔记之”表单读不出数据“解决指南
qq_46396470的博客
07-12 329
脑瓜子好了后，忘记了表单控件必须要加上。提交后打印的字典是空的，卡了十几分钟。
Vue 组件间通信有哪几种方式
08-17
在Vue中，组件间通信的方式有以下几种： 1. 父组件向子组件传递数据：父组件可以通过props属性向子组件传递数据。子组件通过props属性接收数据。 2. 子组件向父组件传递数据：子组件可以通过$emit方法向父组件发送事件，并传递数据。 3. 兄弟组件间通信：兄弟组件之间的通信可以通过父组件作为中介。兄弟组件可以将数据传递给父组件，然后由父组件将数据传递给其他兄弟组件。 4. 使用Vuex进行状态管理：Vuex是Vue的官方状态管理库，可以集中管理应用的状态。通过Vuex，不同组件可以共享同一个状态，从而实现组件间通信。 5. 使用事件总线：可以使用Vue实例作为事件总线，不同的组件可以通过事件总线进行通信。组件可以通过$emit方法触发事件，其他组件可以通过$on方法监听事件，并进行响应。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值