vue2.0组件之间传递数据

一，父向子

当父组件向子组件传数据的时候用这种方法比较简单。步骤为：

1，在子组件中声明props

2，在父组件中使用子组件时传入数据

二，组件之间

在组件之间如果两个组件之间的关系很远可以使用这种方法。

1，首先声明一个工具js命名为eventBus.js

在eventBus.js里面先导入vue在共享一个vue实例。

2，在发送方导入eventBus.js

使用.$emit方法传值。

3，在接收方使用on接收

on方法一般直接放在created里

vue2.0组件之间传递数据的更多相关文章

  1. vue2.0 组件之间的数据传递

    组件间的数据传递// 父组件<template><div class="order"><dialog-addpro v-on:closedialog= ...

  2. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  3. Vue2.0组件之间通信（转载）

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  4. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  5. vue2.0组件之间的传值

    1.父子组件--props props:需要注意的是,虽然的是单向的数据流,但是如果传递的是数组或是对象这样的引用类型,子组件数据变化,父组件的数据通也会变化 子组件代码 <template&g ...

  6. vue组件父子组件之间传递数据

    举个栗子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  7. vue项目中多个组件之间传递数据

    //父组件<template> <div> <div style="float: left"> <input-data :city=&qu ...

  8. 解决vue不相关组件之间的数据传递----vuex的学习笔记，解决报错this.$store.commit is not a function

    Vue的项目中,如果项目简单, 父子组件之间的数据传递可以使用  props 或者 $emit 等方式 进行传递 但是如果是大中型项目中,很多时候都需要在不相关的平行组件之间传递数据,并且很多数据需要 ...

  9. vue2.0 组件化及组件传值

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下, ...

  10. Vue2.0组件间数据传递

    Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...

随机推荐

  1. 4. Mybatis的增删改查(CRUD)

    1.新增 ‍ <!--int insertUser();--> <insert id="insertUser"> insert into t_user va ...

  2. spring-boot-maven-plugin插件详解

    一. 为什么Spring Boot项目自带这个插件 当我们在SpringBoot官方下载一个脚手架时,会发现pom.xml会自带spring-boot-maven-plugin插件 <?xml ...

  3. SQL Server中的NULL值处理：判断与解决方案

    摘要: 在SQL Server数据库中,NULL是表示缺少数据或未知值的特殊标记.处理NULL值是SQL开发人员经常遇到的问题之一.本文将介绍SQL Server中判断和处理NULL值的不同方法,以及 ...

  4. 【AI新趋势期刊#1】GPT自动理解视频、AI法律顾问、大模型安全围栏

    每天都要浏览大量AI相关新闻,是不是感到信息量爆炸,有效信息少? 这么多新产品和新工具,到底哪些是真正是有价值的,哪些只是浮躁的一时热点? 想参与AI产品和工具的开发,从哪里能够获得大量的灵感和思路? ...

  5. RabbitMQ 多消费者 使用单信道和多信道区别

    RabbitMQ 多个消费者共用一个信道实例 与 每个消费者使用不同的信道实例 区别: 1. 多个消费者共用一个信道实例:这种方式下,多个消费者共享同一个信道实例来进行消息的消费. 优点:这样可以减少 ...

  6. Blazor前后端框架Known-V1.2.4

    V1.2.4 Known是基于C#和Blazor开发的前后端分离快速开发框架,开箱即用,跨平台,一处代码,多处运行. Gitee: https://gitee.com/known/Known Gith ...

  7. [转]-- ISP（图像信号处理）算法概述、工作原理、架构、处理流程

    目录 ISP的主要内部构成: ISP内部包含 CPU.SUP IP(各种功能模块的通称).IF 等设备 ISP的控制结构:1.ISP逻辑 2.运行在其上的firmware ISP上的Firmware包 ...

  8. Oracle分区表设置详解

    Oracle分区表详解 Oracle建议单表超过2G就需要进行分表,一万数据大概3MB,单表最多分区为1024*1024-1个分区,我感觉够我们使用了哈 废话不多说,上示例,Oracle分表具体sql ...

  9. JVM 常见错误汇总

    栈内存溢出 栈内存错误包括:栈帧过多(StackOverflowError).栈帧过大(OutOfMemoryError) StackOverflowError:如果线程请求的栈深度大于虚拟机所允许的 ...

  10. 彻底搞懂Vue针对数组和双向绑定(MVVM)的处理方式

    欢迎关注我的博客:https://github.com/wangweianger/myblog Vue内部实现了一组观察数组的变异方法,例如:push(),pop(),shift()等. Object ...