没有合适的资源?快使用搜索试试~ 我知道了~
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
0 下载量 19 浏览量
2020-12-01
23:50:38
上传
评论
收藏 45KB PDF 举报
温馨提示
试读
2页
我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在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}
资源推荐
资源详情
资源评论
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;
} );
}
资源评论
weixin_38659248
- 粉丝: 4
- 资源: 964
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功