2016辽宁春晚宋小宝,酒色影院,开封找工作
我们接着继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样.
在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 './components/brother1.vue'; import brother2 from './components/brother2.vue'; export default { components : { brother1, brother2 } } </script>
小结:
创建一个事件传递中心,例如eventhandler.js,用它作为传递消息的中介
在需要传值的组件中用eventhandler.$emit触发一个自定义事件,并传递参数
在需要接收数据的组件中用eventhandler.$on监听自定义事件,并在回调函数中处理传递过来的参数
以上这篇vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论