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. 6个常见的IB网络不通问题

    摘要:如果遇到IB网络不通,可以试着从高层往底层逐步分析看看. 本文分享自华为云社区<常见IB网络不通问题记录>,作者: tsjsdbd . 如果遇到IB网络不通,可以试着从高层往底层逐步 ...

  2. AI-4多层感知机

    4.1笔记 在线性网络中,任何特征的增大都会导致模型输出的增大或减小.这种想法在某些情况下不在适用,例如x和y并非线性关系.或者是x和y并不具有单调性.以及x1.x2会对y产生交互作用时. 为解决该问 ...

  3. Django自身提供测试类、工具-调研

    Django自身提供测试类.工具 django.test.Client 他的作用是模拟客户端.提供一系列的方法,例如get.post.delete.login等其中login是用django自身的验证 ...

  4. Linux安装与配置FTP服务

    1.FTP安装与配置 1.1.FTP安装 一般使用yum直接在线安装 # 在线安装FTP yum install -y vsftpd 安装完成后查看ftp状态 # 查看ftp状态 systemctl ...

  5. Blazor实战——Known框架多表增删改查

    多表增删改查示例 本章介绍学习多张表增.删.改.查功能如何实现,下面以销货出库单作为示例,该业务栏位如下: 销货出库单栏位 销货单号.销货日期.状态.客户.备注 销货出库单明细栏位 商品编码.商品名称 ...

  6. 代码随想录算法训练营第三天| LeetCode 203.移除链表元素（同时也对整个单链表进行增删改查操作） 707.设计链表 206.反转链表

    203.移除链表元素         题目链接/文章讲解/视频讲解::https://programmercarl.com/0203.%E7%A7%BB%E9%99%A4%E9%93%BE%E8%A1 ...

  7. 【go语言】3.1.2 接口的定义和实现

    在 Go 中,接口是一种抽象类型,用来描述其他类型应该有哪些方法.它定义了一组方法,但没有实现.这些方法由其他类型实现. 接口的定义 接口定义的格式如下: type InterfaceName int ...

  8. tensorflow-2.7-M1-安装依赖openblas问题

    问题描述 安装过程 conda create -n conda-forge-tensorflow conda-forge::tensorflow conda info -e conda activat ...

  9. Linux学习疑惑总结

    重定向问题 Linux shell 中 2>&1 的含义 首先了解下1和2在Linux中代表什么,先整理一份在Linux系统中0 1 2是一个文件描述符: 名称 代码 操作符 Java中 ...

  10. 推荐几款三维模型OBJ格式轻量化处理工具软件

    推荐几款三维模型OBJ格式轻量化处理工具软件 以下是几款常用的三维模型OBJ格式轻量化处理软件的介绍: 1.MeshLab: MeshLab是一款免费且强大的开源三维模型处理软件,支持多种文件格式,包 ...