兄弟组件之间互相传值，需要建立一个“中转站”（新的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父组件向子组件动态传值的两种方法
- vue2.0 子组件改变props值,并向父组件传值的方法
- vue 子组件向父组件传值方法
- 浅谈Vue父子组件和非父子组件传值问题
- Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
- Vue父子组件双向绑定传值的实现方法
- 详解vue 组件之间使用eventbus传值
- Vue 组件传值几种常用方法【总结】
- vue2.0组件之间传值、通信的多种方式(干货)
- VUE兄弟组件传值操作实例分析
