Vue.js中兄弟组件之间互相传值实例
2017-06-01 15:38
1066 查看
兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。
实例上的$on方法来接受监听。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script> </head> <body> <div id="box"> <child1></child1> <child2></child2> </div> <template id="c1"> <h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>点击</button></h1> </template> <template id="c2"> <h3>~~~~~~我是弟弟~~~~{{msg2}}</h3> </template> </body> </html> <script> var Hub=new Vue(); // 1) 中转站,其中不需要设置任何参数 var vm=new Vue({ el: '#box', components:{ child1:{ template:'#c1', data:function(){ return { msg: 'hello' } }, methods:{ fn:function(){ // 2) 主动触发监听(中转站触发监听) console.log(this.msg); //hello Hub.$emit('change',this.msg) //$emit触发监听方法 } } }, child2:{ template:'#c2', data:function(){ return { msg2: 'world' } }, // 创建完成 new Vue create mount // 钩子函数 created(){ // 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值 Hub.$on('change',function(val){ console.log(val) //hello // this.msg2 = val; }) } } } }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- Vue.js中兄弟组件之间互相传值
- vue.js表格组件开发的实例详解
- vue.js树形组件之删除双击增加分支实例代码
- 详解Vue组件之间的数据通信实例
- vue.js 学习之组件之间数据传递详解
- vue.js 组件之间传递数据
- require.js 加载 vue组件 r.js 合并压缩的实例
- vue 兄弟组件之间传数据之通过父组件来传递
- Vue.js组件之间的通信
- Vue.js手风琴菜单组件开发实例
- Vue.js中组件中的slot实例详解
- vue.js实现仿原生ios时间选择组件实例代码
- vue.js指令和组件详细介绍及实例
- Vue.js组件之同级之间的通信
- vue.js移动端tab组件的封装实践实例
- Vue.js 父子组件通讯开发实例
- Vue.js 递归组件实现树形菜单(实例分享)
- Vue.js实战之组件之间的数据传递
- Vue.js组件之间的调用
- vue.js组件之间传递数据的方法