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. mysql where和having的用法例子

    结论:想在分组之后在进行过滤就要使用having了,如果只是对指定的行进行过滤的话,那么就需要使用where了

  2. 无缝数据转换！使用C++ 实现 Excel文件与CSV之间的相互转换

    CSV格式是一种通用的文本文件格式,可在多个应用程序之间共享和使用.相比之下,Excel文件是一种电子表格格式,通常只能在Microsoft Excel中编辑和查看.因此,将Excel文件转换为CSV ...

  3. P3133 [USACO16JAN] Radio Contact G 无线电通话

    P3133 [USACO16JAN] Radio Contact G 无线电通话 目录 P3133 [USACO16JAN] Radio Contact G 无线电通话 [USACO16JAN] Ra ...

  4. Flutter ListView 不满屏 无法滚动

    场景: flutter ListView 在做上拉加载的时候,未list添加controller后,数据不满屏,无法滚动 解决: 未listview 设置: physics: const Always ...

  5. 【环境搭建】多版本的jdk共存

    问题来源 burpsuite 2021需要使用Java 9及以上版本,而其他工具需要Java 8,因此需要两个版本共存,并且做到除了burpsuite以外的工具默认使用Java 8打开. 需要的软件 ...

  6. CMU15-445 Project3 Query Execution心得

    Project3 Query Execution 心得 一.概述 首先要说:这个 project很有趣很硬核!从这个 project 开始才感觉自己在数据库方面真正成长了! 第一个 project : ...

  7. 【技术积累】Vue.js中的组件库【一】

    Vue组件库是什么 Vue中的组件库是一组预先构建好的可重用组件,用于加速开发过程并提高代码的可维护性.组件库通常包含一系列常用的UI组件,如按钮.输入框.下拉菜单等,以及一些功能性组件,如模态框.轮 ...

  8. 使用 virt-install 命令创建虚拟机

    实践 参考文档:官方手册 这个命令适用于创建第一个虚拟机,后面如果再增加,修改xml文件或者使用clone命令就可以了. centos.sh #!/bin/bash name='centos7' is ...

  9. 自用 .net C# List集合和DataTable互转，可自定义表头

    using System; using System.Collections.Generic; using System.Data; using System.Linq; using System.R ...

  10. Cilium系列-13-启用XDP加速及Cilium性能调优总结

    系列文章 Cilium 系列文章 前言 将 Kubernetes 的 CNI 从其他组件切换为 Cilium, 已经可以有效地提升网络的性能. 但是通过对 Cilium 不同模式的切换/功能的启用, ...