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 相关文章推荐
javascript 定义新对象方法
Feb 20 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
JavaScript 原型继承
Dec 26 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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
浅谈discuz密码加密的方式
2014/05/22 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
2015/12/06 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
微信小程序 地图map实例详解
2017/06/07 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
Python遍历目录并批量更换文件名和目录名的方法
2016/09/19 Python
python线程池threadpool使用篇
2018/04/27 Python
python使用KNN算法识别手写数字
2019/04/25 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
关于python3中setup.py小概念解析
2019/08/22 Python
Python 支持向量机分类器的实现
2020/01/15 Python
对Tensorflow中tensorboard日志的生成与显示详解
2020/02/04 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python json格式化打印实现过程解析
2020/07/21 Python
HTML5中的Web Notification桌面通知功能的实现方法
2019/07/29 HTML / CSS
HTML5 weui使用笔记
2019/11/21 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
Java如何支持I18N?
2016/10/31 面试题
中药专业自荐信范文
2014/03/18 职场文书
2015年全国科普日活动总结
2015/03/23 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
vue中的可拖拽宽度div的实现示例
2022/04/08 Vue.js