vue-cli兄弟组件之间的传值

在vue-cli中如何实现兄弟组件之间的传值呢？

下面通过一个小例子来给大家说明一下vue-cli中兄弟组件之间的传值问题。
一、创建一个vue-cli项目

二、在该项目中创建两个兄弟组件:comp-one、comp-two

comp-one的代码如下：

<template>
    <div class="compone-container">
        <h1>组件1</h1>
        <button @click="sendValue">发射给组件2</button>
    </div>
</template>
<script>
import bridge from "../assets/bridge"
export default{
    data(){
        return{}
    },
    methods:{
        sendValue:function(){
            bridge.$emit("to_two",{val:"给你的，兄弟！"});
        }
    }
}
</script>

comp-two的代码如下：

<template>
    <div class="comptwo-container">
        <h1>组件2</h1>
        <h3>{{getted_value}}</h3>
    </div>
</template>
<script>
import bridge from "../assets/bridge"
export default{
    data(){
        return{
            getted_value:""
        }
    },
    created(){
        bridge.$on("to_two",(val)=>{
            console.log(val);
            this.getted_value = val.val;
        })
    }
}
</script>

三、在assets文件夹中创建bridge.js文件（作为桥梁）

bridge.js的代码如下：

import Vue from "vue";
export default new Vue;

四、实现效果如下：

好啦，本期的知识点就到这里了，有疑问的小伙伴欢迎在下方留言哦