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. MRS-MRS相同功能代码管理应用笔记

    MRS相同功能代码管理应用笔记 使用 MounRiver(以下简称 MRS )进行 RISC-V 单片机开发时,工程目录下往往存在多个文件夹与文件,我们只需要着重关注截图中红框所示的部分,它们自上而下 ...

  2. Java 文件写入不覆盖的写法

    FileOutputStream o = null; File file = null; FileWriter fw = null; byte[] buff = new byte[]{}; try { ...

  3. Vmware安装Deepin20

    一.搭建环境 虚拟机:Vmware Workstation pro 17 Windows版本 镜像:Deepin 20 二.创建虚拟机 1.点击创建新的虚拟机,选择典型 2.选择稍后安装 3.选择li ...

  4. 2023-07-17：给定一个数组arr，长度为n， 再给定一个数字k，表示一定要将arr划分成k个集合， 每个数字只能进一个集合。 返回每个集合内部的平均值都累加起来最小的值。 平均值向下取整。 1

    2023-07-17:给定一个数组arr,长度为n, 再给定一个数字k,表示一定要将arr划分成k个集合, 每个数字只能进一个集合. 返回每个集合内部的平均值都累加起来最小的值. 平均值向下取整. 1 ...

  5. Spring6 初始

    Spring6 初始 @ 目录 Spring6 初始 每博一文案: 1. 初始 Spring6 1.1 OCP开闭原则 1.2 依赖倒置原则DIP 1.3 控制反转IoC 2. Spring 初始 2 ...

  6. MarkdownQuote：简化 Markdown 中的代码引用！

    MarkdownQuote:简化 Markdown 中的代码引用! 这是 SourceCodeTrace 项目之一,通过在 IDE 中提供一种便捷的方式,快速复制包含代码来源 Markdown 代码块 ...

  7. opencv-python中 boundingRect（cnt）以及cv2.rectangle用法

    矩形边框(Bounding Rectangle)是说,用一个最小的矩形,把找到的形状包起来.还有一个带旋转的矩形,面积会更小,效果见下图 首先介绍下cv2.boundingRect(img)这个函数 ...

  8. deepin install mariadb

    输入指令: sudo apt-get install mariadb-server mariadb-client

  9. 记一次因为C#官方扩展导致自动补全出错的情况 (C# & Godot)

    现象 最近使用Vscode结合Godot使用时突然发现自动补全出问题了,发现一部分自动补全能弹出补全项目,但是确认后不起作用,还会吞掉弹出自动补全后输入的字符.大概是下图这样的感觉(截图时已修好,图为 ...

  10. Maven资源导出问题所需配置

    <!--在build中配置resources,来防止我们资源导出失败的问题--> <build> <resources> <resource> < ...