vue组件传值---- 非父子组件传值

import Vue from 'vue'

export default new Vue

上面就是bus.js文件内容

 

 <template id="banner">
     <div>
        <p>组件一</p>
        <button @click="tap()">点击传值</button>
     </div>
     <v-Modular></v-Modular>
 </template>
//引入组件二
<script>
import Modular from './Modular';
 export default {

    components:{
      'v-Modular':Modular
    },
    methods:{
       tap(){
          bus.$emit("isa",传过去的值)//进行传值
       }
    }
 }
</script>

如果传的值较多可以写成对象{}的形式

<template id="footer">
     <div>
        <p>组件二</p>
        <p>这是组件一传过来的值---{{ str1 }}</p>
     </div>
 </template>
<script>
import Modular from './bus.js';
export default {
   data(){
     return{
        str1:''
     }
   },
    mounted(){
      var _this = this
      bus.$on("isa",function(data){
        console.log(data)//进行接收值
         _this.str1 = data
     })
   }
}
</srcipt>