Vue 组件通信

小灰灰 2022-01-07 18:29 368阅读 0赞

**父组件 -> 子组件**

props

<my-component :date="date"></my-component>

注意：如果子组件定义props名称使用了驼峰命名，则需要在传值时改成 - 分开，因为html对大小写不敏感，例如

<my-component :my-date="date"></my-component>

\* 但是在vue单文件组件中貌似是可以使用驼峰写法的

**子组件 -> 父组件**

子组件中直接修改props值可以成功，但是框架会抛出一个错误，所以不推荐

![1058702-20190331152223869-810192502.png][]

推荐的做法：在父组件中定义一个修改props的方法，然后子组件调用父组件的方法

1. 在子组件中直接调用父组件方法修改props值

this.$parent.change(new Date())

2. 子组件触发事件，在父组件中捕捉然后执行change方法

父组件：

<my-component :my-date="date" @changeDate="change"></my-component>

子组件：

this.$emit('changeDate', new Date())

推荐使用第二种

**子组件 -> 子组件**

这种情况属于两个不相关的子组件之间的通信，我们无法通过props将两者关联起来，两种解决办法：

1. vuex ： 全局状态管理器

2. 事件总线：EventBus

定义：本质上就是实例化一个新的Vue对象，这个对象专门负责处理多组件之间的通信

用法：

// main.js
    Vue.prototype.$EventBus = new Vue()

绑定一个eventBus到Vue对象，在页面中通过 on（注册），emit（触发）

//component1
    this.$EventBus.$on('change', function(param){
      console.log('事件触发',param)
    })

//component2
    this.$EventBus.$emit('change', 123)

转载于:https://www.cnblogs.com/xiaoliwang/p/10631543.html

[1058702-20190331152223869-810192502.png]: /images/20211220/a43ba047cb30441bac40e842d0c21023.png

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE组件通信bus

一、语法：用于组件通信，这两个组件可以是父子关系、兄弟关系，也可以没有任何关系。bus使用$emit， $on， $off 分别来分发、监听、取消监听事件。使用方法：

痛定思痛。/ 2023年01月22日 11:52/ 0 赞/ 189 阅读

相关 Vue组件通信 (六)

目录 1. 父向子组件通信 1.1 props 1.2 ref 1.3 children 2. 子向父组件通信

- 日理万妓/ 2022年12月13日 01:37/ 0 赞/ 214 阅读

相关 vue 组件通信

1.父子组件通信父传子（1）通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收父组件 <template>

╰半橙微兮°/ 2022年11月20日 08:18/ 0 赞/ 265 阅读

相关 vue组件通信

文章目录父组件给子组件传递数据关于props 子组件给父组件传递数据在组件中使用

淡淡的烟草味﹌/ 2022年11月04日 05:55/ 0 赞/ 274 阅读

相关 Vue组件间的通信

下面的总结都将按照这个模型图去设计 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9

逃离我推掉我的手/ 2022年09月05日 12:38/ 0 赞/ 242 阅读

相关 Vue组件间通信

什么是Vue组件？ [组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，V

偏执的太偏执、/ 2022年06月07日 11:24/ 0 赞/ 291 阅读

相关 Vue 组件通信

父组件 -> 子组件 props　 <my-component :date="date"></my-component> 注意：如果子组件定义props名称使用了

小灰灰/ 2022年01月07日 18:29/ 0 赞/ 369 阅读

相关 vue组件之间的通信

一、props/$emit 缺点：不能兄弟之间通信父组价通过props向子组件传递消息。父组件 <template> <div cla

柔情只为你懂/ 2021年11月24日 00:36/ 0 赞/ 381 阅读

相关 vue组件通信

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。 props和$emit(常用) $attrs和$listeners

Myth丶恋晨/ 2021年09月02日 03:34/ 0 赞/ 601 阅读

相关 vue组件之间的通信

作为一个vue初学者不得不了解的就是组件间的数据通信(暂且不谈vuex)。通信方式根据组件之间的关系有不同之处。组件关系有下面三种：父-->子、子-->父、非父子父-->子

小咪咪/ 2021年07月26日 19:52/ 0 赞/ 549 阅读