美文网首页前端知识点vue开发干货vue
Vue 非父子传参(兄弟组件)bus中央总线 精彩demo

Vue 非父子传参(兄弟组件)bus中央总线 精彩demo

作者: 顺小星 | 来源:发表于2019-09-29 13:56 被阅读0次

    首先,新建一个js文件,并在两个组件中引入。如下图:

    两个子组件与中央总线

    js文件里写一个空壳,如下:

    import Vue from 'vue'
    
    export default new Vue;
    

    一、父组件中,注册两个子组件并使用。格局安排如下:

     <div class="big">
          <Son1></Son1>
          <Son2></Son2>
    </div>
    

    二、son1组件中,点击一次传递信息给son2。

    html中:

    <div @click="clickSon">子组件一号,点我传值,再点消失</div>
    

    js中:用emit通过bus发送数据,暗号 “aaa”

    import Bus from '../bus/index'
    
    data() {
        return {
          son1Message: {
            isShow: true,
            info: "我是来自一号组件的大魔王阿星!"
          }
        };
      },
      methods: {
        clickSon() {
          this.son1Message.isShow = !this.son1Message.isShow;
          Bus.$emit("aaa", this.son1Message);
        }
      }
    

    三、son2中,在created中

    js中:对上son1中 “aaa” 的暗号,拿过来在data中定义变量去接

    import Bus from '../bus/index'
    
    data(){
            return{
                isShow:'',
                son2Message:""
            }
        },
        created(){
            Bus.$on("aaa",res=>{
                this.isShow = res.isShow
                this.son2Message = res.info
            })
        },
    

    html中:

    <div class="son2">
          子组件二号
          <div v-if="isShow">{{son2Message}}</div>
      </div>
    

    其中v-if="isShow"是控制点击出现,再点击消失的

    效果:

    初始:


    初始状态

    点击一次:


    点击一次
    点击两次:
    所传值消失

    总结:

    1、新建一个空的 js :

    import Vue from 'vue'
    export default new Vue;
    

    2、在两个子页面中分别导入:

    import Bus from '../bus/index'
    

    3、在输出组件中设定一个点击方法(或其他):


    通过Bus设置暗号,并发送

    4、在接收组件总对上暗号,并接收:

    通过Bus对上暗号,并接收

    就是他妈的这么简单

    相关文章

      网友评论

        本文标题:Vue 非父子传参(兄弟组件)bus中央总线 精彩demo

        本文链接:https://www.haomeiwen.com/subject/bhdfpctx.html