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. OOP第三阶段题目集总结|课程总结-22201608-柯汶君

      第三阶段的题目集时间跨度大,内容比较充实,对前面学习过的类的继承,多态,接口进行了巩固练习,加深我们对多态的理解,学会更好地改善代码的结构.同时对最后阶段所学习的集合框架体系(Set.Map等)比 ...

  2. 什么是hive的高级分组聚合，它的用法和注意事项以及性能分析

    hive的高级分组聚合是指在聚合时使用GROUPING SETS.CUBE和ROLLUP的分组聚合. 高级分组聚合在很多数据库类SQL中都有出现,并非hive独有,这里只说明hive中的情况. 使用高 ...

  3. 【Oracle】当条件中存在空值时，同时将空值和非空值的结果查询出来

    [Oracle]当条件中存在空值时,同时将空值和非空值的结果查询出来 如果不是一定要用这个存在空值的条件的话,最好还是不用为好,省的麻烦 正常的查询结果如下 select * from ttt2023 ...

  4. 【Springboot】过滤器

    Springboot实现过滤器 实现过滤器方式有两种: Filter过滤器具体实现类 通过@WebFilter 注解来配置 1.Filter过滤器具体实现类 1.1 实现Filter @Compone ...

  5. elasticSearch初步学习反思

    转自自己的qq空间 2022年11月29日 每次找到新技术就会发癫 把业务整理完了 看着elasticSearch开始发癫 TM的把所有的一切都塞给它 反正全标记索引要啥拿啥 狠狠地获取就完了 思来想 ...

  6. 【渗透测试】Cobalt Strike制作钓鱼邮件渗透Windows

    目标 在kali中使用Cobalt Strike制作钓鱼邮件,对Windows进行渗透 机器环境 kali(服务端):192.168.175.129 win11(攻击机):192.168.175.12 ...

  7. Oracle快速拷贝数据

    游标拷贝数据 根据条件进行数据拷贝 -- 游标方式拷贝数据 DECLARE CURSOR cur IS SELECT * FROM JACKPOT WHERE TO_CHAR(JACKPOT.CREA ...

  8. 模拟ArrayList（顺序表）的底层实现

    模拟ArrayLIst的底层实现 package com.tedu.api04.list; import java.util.Objects; /** * @author LIGENSEN * Dat ...

  9. Asp.Net MVC中Action跳转小结(转载)

    来源: https://www.cnblogs.com/surfing/p/3542826.html 首先我觉得action的跳转大致可以这样归一下类,跳转到同一控制器内的action和不同控制器内的 ...

  10. 【技术实战】Vue技术实战【二】

    需求实战一 效果展示 代码展示 <template> <div> <a-table :dataSource="dataSource" :columns ...