vue 组件通信

最新推荐文章于 2022-12-08 23:50:14 发布
最新推荐文章于 2022-12-08 23:50:14 发布
阅读量218 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46390400/article/details/107415124
版权

vue最大的特点之一就是组件化，那么组件跟组件之间是如何通信的呢？
常见的有三种通信：

父传子
子传父
兄弟传值

一、父传子

1.创建子组件，在src/components/文件夹下新建一个Child.vue
2.Child.vue的中创建props，然后创建一个名为message的属性
在这里插入图片描述
3.在App.vue中注册Child组件，并在template中加入child标签，标签中添加message属性并赋值

在这里插入图片描述
或者利用v-bind进行绑定
在这里插入图片描述
总结一下：
1.子组件在props中创建一个属性，用以接收父组件传过来的值
2.父组件中注册子组件
3.在子组件标签中添加子组件props中创建的属性
4.把需要传给子组件的值赋给该属性

二、子传父

1.在子组件中创建一个按钮，给按钮绑定一个点击事件
在这里插入图片描述
2.在响应该点击事件的函数中使用KaTeX parse error: Expected 'EOF', got '#' at position 202: …mage/format,png#̲pic_center) …emit的第二个参数，该值将作为实参传给响应自定义事件的方法
3.在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

三、兄弟传值

事件总线fan

1.我们先来创建中央事件总线，在src/assets/下创建一个eventBus.js,内容如下
在这里插入图片描述
2. 创建一个firstChild组件，引入eventBus这个事件总线，接着添加一个按钮并绑定一个点击事件
在这里插入图片描述
3. 我们再创建一个secondChild组件，引入eventBus事件总线，并用一个p标签来显示传递过来的值
在这里插入图片描述
4. 在父组件中，注册这两个组件，并添加这两个组件的标签
在这里插入图片描述
总结一下：
1.创建一个事件总线，例如demo中的eventBus，用它作为通信桥梁

2.在需要传值的组件中用bus.$emit触发一个自定义事件，并传递参数

3.在需要接收数据的组件中用bus.$on监听自定义事件，并在回调函数中处理传递过来的参数

小静是菜鸡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件通信传值操作示例
12-29
本文实例讲述了vue组件通信传值操作。分享给大家供大家参考，具体如下： 父子组件通信： 子组件 <h3 click=alerrt> 我是子组件一 <span>{{parentMessage}} [removed] export default{ props: ['...
Vue组件通信的几种实现方法
10-17
主要介绍了Vue组件通信的几种实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue初识
sunhangye的博客
10-17 493
什么是Vue组件？组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 Vue组件间通信父组件向子组件通信方法一：props使用props，父组件可以使用props向子组件传递数据。父组件
vue中的组件通信
TeFuir__Lv的博客
12-08 1212
vue中的组件通信
Vue——组件通信
虽菜但瘾
02-01 118
组建通信 组件之间的通信在任何框架中都是核心的内容，这一篇仅是看着视频教程和其他博主的内容来誊写的，因此更倾向于自己，对其他人可能没有什么参考价值。 拓展： vue组件间通信六种方式（完整版 ——思否(浪里行舟)） vue组件之间通信的8种方式——博客园(张小VV) Vue组件通信——博客园(一只菜鸟攻城狮啊) props 之前的事件监听是通过bind绑定来向子组件传值，然后子组件通过props来接收，接受的写法也不同，可以直接将事件名称写进数组中，也可以写成对象的形式，对象中也可以加入一些属性来限制参
vue.js组件与组件之间的通信
curry_zhao的博客
11-02 1万+
什么是组件？ 组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。 使用组件 注册 之前说过，我们可以用 Vue.extend() 创建一个组件构造器：
vue组件间通信六种方式
weixin_45035430的博客
03-03 994
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： image 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如props、emit/emit/emit/on、vuex、$parent / children、childr
Vue组件通信的四种方式汇总
11-27
本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信...
Vue组件通信
qq_20470063的博客
03-10 840
组件通信 1. props 适用场景：父子组件通信 注意事项：如果父组件给子组件传递数据（函数），本质是子组件给父组件传递数据 如果父组件给子组件传递的数据（非函数），本质是父组件给子组件传递数据 书写方式：3种 [‘todos’],{type:Array},{type:Array,default:[]} 小提示：路由的props 书写形式：布尔值、对象、函数 2. 自定义组件 适用场景：子组件给父组件传递数据 $on KaTeX parse error: Expected '}', got 'EOF' a
vue中组件间通信的6种方式
热门推荐
jiangjunyuan168的博客
01-23 4万+
前言 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。 除了使用vuex外还有下面6种组件间的通信方式： 1、 props / $emit 父组件通过 props 向子组件传递数据，子组件通过 $emit 和父组件通信 （1）父组件向子组件传值（props的用法） props的特点： props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父
Vue 组件通信
北海之灵的博客
01-06 384
1.自定义事件-$emit 子组件用 $emit() 来触发事件，父组件用 $on() 来监听子组件的事件。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;/head&gt; &lt;body&gt;
vue的组件通信
chenxiaodage的博客
10-29 84
父组件与子组件传值 父组件传给子组件：子组件通过props方法接受数据; //父组件 <子组件 属性1="值" 属性2="值"></子组件> <子组件 ：属性="变量"></子组件> {{属性1}} <li v-for="item in 属性1"></li> <script> export default { props:['属性1'，'属性2'] } </script> 注意：vu
vue组件通信
Shi_Jiu_的博客
07-19 164
vue组件通信 组件是vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A和B、B和C、B和D都是父子关系，C和D是兄弟关系，A和C是隔代关系 方法一、props/$emit 父组件向子组件传递数据是通过prop传递的，子组件传递数据给父组件是通过$emit触发事件来做到的 1、父组件向子组件传值 父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，
vue组件通信友谊聊吧
最新发布
04-23
关于 Vue 组件通信, 我可以为您提供一些解决方案。Vue 组件通信是指在一个 Vue 应用程序中，不同组件之间共享数据或将数据从一个组件传递到另一个组件的过程。其中包括父组件向子组件传递数据、子组件向父组件传递...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值