vue组件之间的通信

一、创建新的实例来实现通信

1、在src目录下创建一个bus.js

import Vue from 'vue'
var bus = new Vue()
export default bus

A组件：
1、引入bus.js

<template>
    <button @click="side">点击触发函数</button>
</template>
<script>
    import bus from '../bus.js'
    export default{
        methods:{
            side(){
                bus.$emit("showSide","我是A组件传过来的值");
            }
        }
    }
</script>

B组件：
1、引入bus.js

<script>
    import bus from '../bus.js'
    export default{
        mounted:{
            bus.$on("showSide",showTest);
        },
        methods:{
            showTest(val){
                console.log(val);//我是A组件传过来的值
            }
        }
    }
</script>