Vue2.0实现组件之间数据交互和通信操作示例


Posted in Javascript onMay 16, 2019

本文实例讲述了Vue2.0实现组件之间数据交互和通信操作。分享给大家供大家参考,具体如下:

Vue2.0组件之间数据交互和通信。

Vue2.0废弃了dispatch 和 $broadcast,如何在实现组件之间的数据交互和通信?下面是一个简单的demo解决了这个问题。

事件中心(evengtHub.js):

//定义事件中心,在模板通信是使用。
import Vue from 'vue';
export default {
  bus: new Vue()
}

父组件:

<div>
  <!--msg必须跟子组件的msg参数一致,@msg是子组件向父组件传参数的接口,:msg是父组件向子组件传参数的接口-->
  <child1 @msg='getMsg' :msg1='msg1'></child1>
  <child1 ref='child2'></child2>
<div>
<script>
import bus form 'eventHub'
  componets: {
    child1: require('child1'),
    child2: require('child2');
  },
  data() {
    return: {
      msg1: 'hello'
    }
  },
  methods: {
    getMsg(el) {
       this.$refs.child2.drop(el);
       //父组件调用child2组件的drop方法,传递el参数,子组件和子组件之间的通信
    }
  }
</script>

子组件1

<template>
  <div class='child1' @click='sendMsg'>{{msg}}<div>
</template>
<script>
import bus form 'eventHub';
//props属性用于子组件接收父组件传过来的参数
  props: {
    msg1 :String
  },
  methods: {
    this.bus.$emit('add', event.target);//此方法可以通过子组件1在任意组件内响应点击事件。
    this.$emit('msg', event.target);//发送数据给父组件,这个方法的'msg'参数必须和父组件的@msg保持一致。
  }
</script>

子组件2

<template>
  <div class='child2'><div>
</template>
<script>
import bus form 'eventHub'
methods: {
  drop(el) {
    console.log(el);//打印出child1的div元素
  }
},
created() {
  this.bus.$on('add',() => {
    console.log('响应child1的点击事件');
  })
}
</script>

上面的例子中包括父子组件之间互相传参数和组件之间的通信,更好的组件通信事件请使用vuex。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
Apr 14 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
js友好的时间返回函数
Aug 24 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 Javascript
探究JavaScript中的五种事件处理程序方式
Dec 07 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
Weex开发之地图篇的具体使用
Oct 16 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 #Javascript
JS左右无缝轮播功能完整实例
May 16 #Javascript
Node.js Windows Binary二进制文件安装方法
May 16 #Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
May 16 #Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
You might like
深入理解PHP内核(一)
2015/11/10 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
解决Laravel5.x的php artisan migrate数据库迁移创建操作报错SQLSTATE[42000]
2020/04/06 PHP
javascript 防止刷新,后退,关闭
2010/08/07 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
javascript实现促销倒计时+fixed固定在底部
2013/09/18 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
对于Python编程中一些重用与缩减的建议
2015/04/14 Python
Python中的匿名函数使用简介
2015/04/27 Python
Python封装shell命令实例分析
2015/05/05 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python做反被爬保护的方法
2019/07/01 Python
python 内置函数汇总详解
2019/09/16 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
Python使用lambda抛出异常实现方法解析
2020/08/20 Python
python中K-means算法基础知识点
2021/01/25 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
怎样从/向数据文件读/写结构
2014/11/23 面试题
幼儿园中秋节活动方案
2014/02/06 职场文书
小区文明倡议书
2014/05/16 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
现实表现材料范文
2014/12/23 职场文书