vue2.0父子组件及非父子组件间实现通信

最新推荐文章于 2025-08-13 21:05:35 发布
转载 最新推荐文章于 2025-08-13 21:05:35 发布 · 73 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://juejin.im/post/5aaf55bb518825556d0de8b0
文章标签：

#javascript #ViewUI

本文详细介绍了Vue 2.0中组件间的通信方式，包括父组件向子组件传递数据的方法、子组件如何通知父组件更新状态，以及非父子组件间的通信技巧。通过具体示例展示了不同场景下的最佳实践。

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

title: vue2.0组件间通信 date: 2017年8月16日 17:57:06 tags: css categories: 教程 author: "JiaWei"

vue2.0父子组件及非父子组件间实现通信

1. 父组件与子组件通信

父组件

子组件通过props来接收数据: 格式1： props: ['childMsg'] 格式2 : props: { childMsg: Array //指定传入的类型 } 格式3： props: { childMsg: { type: Array, default: [0,0,0] //指定默认的值 } }

###2.子组件与父组件通信 在vue中是不允许子组件直接修改父组件的值，在vue中只允许单向数据传递

子组件:

父组件:

PS vue2.3可以使用.sync修饰符进行子组件改变props值(注意这里是改变。想使用props值的话通过computed进行处理) 3.非父子组件间通信 创建事件中心

组件1触发：

组件2接收:

Vue2.0父子组件传值总结
kksw1121
04-17 279
一.父组件向子组件传数据 <!-- 父组件father --> <!-- 父组件通过message属性把msg的值传给子组件child --> <template> <div> <child :message="msg"></child> </div> </template> <s...
vue2.0父子组件及非父子组件之间的通信方法
08-31
3. **非父子组件通信** 对于非父子组件间的通信，Vue 2.0 提供了事件总线（Event Bus）或者使用 Vuex 状态管理库。这里我们讨论事件总线的使用： 首先，创建一个全局的 Vue 实例作为事件中心（Event Hub）： ```...
vue2.0父子组件以及非父子组件如何通信
大熊的博客
01-18 648
1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：parent> child :child-msg="msg">/child>//这里必须要用 - 代替驼峰 /parent> data(){ return { msg: [1,2,3] }; }123456789子组件通过props来接收数据: 方式1：props:
vue2.0父子组件和非父子组件之间的通信
07-23 249
1、父组件传值给子组件 通过props来实现传递数据 父组件： &lt;template&gt; &lt;div&gt; &lt;child message="我是父组件传的值"&gt;&lt;/child&gt;&lt;!-- 如果是变量 :message 切标签用-代替驼峰--&gt; &lt;/div&gt; &lt;/template&a
vue2.0 父子组件通信 兄弟组件通信
qq_31965515的博客
02-25 184
父组件是通过props属性给子组件通信的来看下代码： 父组件： &lt;parent&gt; &lt;child :child-com="content"&gt;&lt;/child&gt; //注意这里用驼峰写法哦 &lt;/parent&gt; data(){ return { content:'sichaoyun' }; } 子组件通过pro...
vue2.0父子组件以及非父子组件通信
setsunadoudou的博客
10-15 146
官网API:https://cn.vuejs.org/v2/guide/components.html#Prop 一、父子组件通信 1、父组件传递数据给子组件，使用props属性来实现 传递普通字符...
vue2.0父子组件间通信实现
weixin_34405925的博客
03-15 134
最近公司做项目要求使用vue，于是开始了vue的学习历程，开始的时候，整个人都是懵逼的状态， 公司项目也是比较复杂，但是开工没有回头箭，没有结果的努力就是对工作的不负责任，于是乎下定 决心一定要搞清楚，现在项目已接近尾声，大体来总结下知识点，本篇文章先来探讨一下Vue子父组件通信的问题。 首先创建两个组件，分别为父组件和子组件如图 p...
vue2.0父子组件通信
weixin_44010187的博客
08-05 177
效果图： 传值前： 传值后： 1.父组件向子组件传值的两种情况 a.给子组件传静态的值： <blog-post title="My journey with Vue"></blog-post> 比较简单，不再赘述 b.动态的值，v-bind绑定，简写 使用 ： 动态传值可以传数字，布尔型，数组，对象等，本文以传对象的两种方式为例，顺便包含传字符串，布尔值两种情况。...
vue2.0组件通信
weixin_42252504的博客
08-06 202
组件通信
VUE2.0组件间7中通信方式
weixin_40984083的博客
03-31 1415
VUE2.0组件间传值大全 Vue组件通信的方式，这是在面试中一个非常高频的问题，很多人只知道props和 $emit，下面简单介绍一下Vue的一些其他传值方式。 一、props/$emit props/$emit可以说Vue里面最常见的通信方式。 props： props用于接收来自父组件通过v-bind传递的数据，可以通过type、default、required、validator等配置来设置属性的类型、默认值、是否必传和校验规则。 $emit： 在组件通信时，我们通常使用 $emit来触发父组件v
vue2.0父子组件间通信的实现方法
08-30
总结，Vue 2.0提供了多种组件间通信的方式，包括使用`props`从父组件向子组件传递数据，通过`$emit`和`v-on`实现子组件向父组件的通信，以及利用事件总线Hub实现任意组件间的通信。理解并熟练运用这些通信机制对于...
vue2.0父子组件间传递数据的方法
10-18
在Vue 2.0中，父子组件间的通信是框架的核心特性之一，对于构建复杂的应用程序至关重要。本篇文章将通过一个简单的小例子来详细介绍如何在父子组件之间传递数据。 首先，我们要明确Vue中组件间的通信主要有两种方式...
Vue2.0学习之详解Vue 组件及父子组件通信
08-28
接下来，我们将讨论Vue2.0中的父子组件通信，这是组件间交互的重要一环： 1. **props向下传递**：父组件可以通过`props`属性向子组件传递数据。子组件接收这些数据并进行处理，但不能直接修改。例如： ```...
electron进程间通信- 从渲染进程到主进程
最新发布
唐璜Taro的博客
08-13 479
本文介绍了Electron中的IPC进程间通信机制，重点解析了从渲染进程到主进程的单向通信实现方式。这种设计既保证了功能实现，又遵循了Electron的安全通信原则，是开发桌面应用的常用模式。
MoonBit Perals Vol.05: 函数式里的依赖注入：Reader Monad
m0_74743788的博客
08-13 455
普通的函数就像一个流水线，你丢进去一袋面粉，然后直接跑到生产线末端，等着方便面出来。但这条流水线需要自动处理中间的所有复杂情况：没放面粉/“没有下单，期待发货”（null）面团含水量不够把压面机干卡了（抛出异常）配料机需要读取今天的生产配方，比如是红烧牛肉味还是香菇炖鸡味（读取外部配置）流水线末端的打包机需要记录今天打包了多少包（更新计数器）Monad 就是专门管理这条复杂流水线的“总控制系统”。它把你的数据和处理流程的上下文一起打包，确保整个流程能顺畅、安全地进行下去。
基于SpringBoot校园管理系统
2501_90968670的博客
08-13 503
校园管理系统是一个基于Spring Boot + Vue.js的全栈应用，专注于高校内部的多角色协作管理。系统实现了院校管理、单位管理、用户管理、通知推送、投票管理等功能模块，满足管理员、院校管理员、普通用户三类角色的不同操作需求。核心目标是提升校园管理效率，实现通知精准推送与数据可视化统计。
Flink Redis维表：Broadcast Join与Lookup Join对比及SQL示例
spark_dev的博客
08-12 686
本文对比了Flink中Redis维表关联的两种方案：Broadcast Join和Lookup Join。Broadcast Join适合小维表（<1GB），通过广播到所有任务实现本地关联，延迟低但内存消耗高；Lookup Join则适合大维表，通过实时查询Redis获取最新数据，内存占用低但延迟较高。文章详细分析了两者的原理、适用场景和性能差异，并提供了两种方案的SQL实现示例。最后建议根据维表大小、更新频率和资源情况选择合适方案，或采用混合模式平衡性能与资源。
Vue3学习之创建vue3项目文件
2301_76989410的博客
08-09 506
Vue3是一个更高效、轻量级的渐进式JavaScript框架，专注于构建用户界面。本文介绍了Vue3项目创建流程：首先安装Node.js并验证环境；然后通过PyCharm创建项目文件夹，使用npm命令初始化Vue项目并选择配置（建议选择TypeScript）；最后清理默认文件结构，开始自定义开发。文中还详细说明了如何删除默认组件代码，为个性化开发做好准备。
前端工程化：pinia
西岭千秋雪的博客
08-11 574
本文介绍了Pinia作为Vue.js官方推荐的状态管理库，用以解决组件间数据共享和状态同步问题。文章首先说明状态管理的必要性，随后详细讲解Pinia的初始化配置，包括安装、挂载和Store创建（包含state、getter、action）。最后通过示例展示如何在组件中使用Store，实现数据获取和渲染。Pinia能有效简化复杂应用的状态管理，提升开发效率。
Vue2.0父子组件事件通信：实例解析与代码演示
总结来说，Vue2.0中通过事件中心进行父组件与子组件通信的关键步骤包括： 1. 创建一个全局的事件中心（Event Bus）。 2. 子组件使用`$emit`派发事件，附带需要传递的数据。 3. 父组件使用`$on`监听事件，并定义响应...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值