vue兄弟组件传参

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue兄弟组件传参相关的知识,希望对你有一定的参考价值。

参考技术A 应用场景:拥有共同父级页面的两个页面传参
原理:vue一个新的实例,类似于一个站,连接着两个组件,也就是一个中央事件总线;
实战:

1.在需要传参的页面引入Bus文件
2.通过Bus.$emit('name','value')传参

(pass:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。)

1.在需要接收的页面引入Bus文件
2.通过Bus.$on("name", data => );接收

(pass:on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。)

vue 兄弟组件相互通信

兄弟组件之间相互传递数据

首先创建一个vue的空白实例(兄弟间的桥梁)

两个兄弟之间建立一个js文件

import Vue from ‘vue‘
export default new Vue()

子组件 childa
发送方使用 $emit 自定义事件把数据带过去

<template>
    <div>
        <span>A组件->{{msg}}</span>
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
    data(){
        return {
            msg:{
                a:111,
                b:222
            }
        }
    },
    methods:{
        send:function(){
            vmson.$emit("aevent",this.msg)
        }
    }
}
</script>
<template>
 <div>
    <span>b组件,a传的的数据为->{{msg}}</span>
 </div>
</template>
<script>
      import vmson from "../../../util/emptyVue"
      export default {
         data(){
                return {
                    msg:""
                }
            },
         mounted(){
                vmson.$on("aevent",this.getEvnt)
        },
    methods:{
      getEvnt(val){
        console.log(val);
      }
    }
    }
</script>

父组件:

<template>
     <div>
      <childa></childa>    
      <br />
      <childb></childb>      
     </div>
</template>
<script>
   import childa from ./childa.vue;
   import childb from ./childb.vue;
   export default {
       components:{
           childa,
           childb
       },
       data(){
           return {
               msg:""
           }
       },
       methods:{
           
       }
   }
</script>

 

以上是关于vue兄弟组件传参的主要内容,如果未能解决你的问题,请参考以下文章

Vue 组件之间传参!

vue组件之间的五种传值方法(父子兄弟跨组件)

Vue组件之间的传参

vue中8种组件传参方式

2019-07-10 在vue UI组件事件中 基于已有参数 灵活自定义传参

03、vue 页面跳转传值,父子组件传值