Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推
网络编程 2021-07-04 17:32www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)。长沙网络推广觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随长沙网络推广过来看看吧
我们接着继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样.
在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件
EventHandler.js代码:
import Vue from 'Vue'; export default new Vue();
1,在Components目录下新建一个组件Brother1.vue
<template> <div> <h3>Z国: ghostwu</h3> <input v-on:click="send" type="button" value="发送"> <p>{{msg}}</p> </div> </template> <script> import EventHandler from '../assets/EventHandler.js'; export default { data(){ return { msg : '' } }, methods : { send(){ EventHandler.$emit( 'myDefineEv', "ghostwu向岛国发射了一颗原子弹" ); } }, mounted (){ let _this = this; EventHandler.$on( "RDefineEv", function( data ){ _this.msg = data; } ); } } </script>
。通过EventHandler.$emit发送一个自定义事件myDefineEv
。通过mouted【相当于jquery的ready, 原生js的onload】,这个是vue生命周期的钩子函数, 用于在页面加载完成之后执行代码,在这里就是接收RDefineEv事件( Brother2.vue定义的 )
2,在Components目录下新建一个组件Brother2.vue
<template> <div> <h3>R国:八嘎</h3> {{msg}} <input v-on:click="defend" type="button" value="防御"> </div> </template> <script> import EventHandler from '../assets/EventHandler.js'; export default { data(){ return { msg : '' } }, methods : { defend(){ EventHandler.$emit( 'RDefineEv', "岛国采用了高科技反原子弹系统" ); } }, mounted(){ let _this = this; EventHandler.$on( "myDefineEv", function( data ){ _this.msg = data; } ); } } </script>
。点击按钮发送RDefineEv事件
。文档ready的时候,接收myDefineEv(Brother1.vue)出发的自定义事件
三、在App.vue中调用两个同级组件
<template> <div id="app"> <Brother1></Brother1> <Brother2></Brother2> </div> </template> <script> import Brother1 from './ponents/Brother1.vue'; import Brother2 from './ponents/Brother2.vue'; export default { ponents : { Brother1, Brother2 } } </script>
小结:
创建一个事件传递中心,例如EventHandler.js,用它作为传递消息的中介
在需要传值的组件中用EventHandler.$emit触发一个自定义事件,并传递参数
在需要接收数据的组件中用EventHandler.$on监听自定义事件,并在回调函数中处理传递过来的参数
以上这篇Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程