zoukankan      html  css  js  c++  java
  • vue兄弟组件的传值eventbus

    注:当在a.vue组件上触发点击事件时,就会触发bus上监听的事件,而bus事件监听在b.vue里面,这个时候就会触发b.vue

    上的事件监听,而通过回调函数,就可以拿到a.vue组件传过来的数据,从而实现兄弟组件通信。

    ###~~bus.js

    import Vue from "vue"
    export default new Vue()
    parent.vue父组件

    <template>
    <div id="app">
    <avue></avue>
    <bvue></bvue>
    </div>
    </template>

    <script>
    import avue from "./avue.vue"
    import bvue from "./bvue.vue"
    export default {
    name: 'parentvue',
    components:{avue,bvue}
    }
    </script>
     

    ###~~a.vue组件

    <template>
    <div @click="aload">叶落森1</div>
    </template>
    <script>
    import bus from "./bus.js"
    export default{
    methods:{
    aload(){
    //通过emit触发事件,并传值
    bus.$emit("bload","我叫叶落森");
    }
    }
    }
    </script>
     

    ###~~~b.vue组件

    <template>
    <div>叶落森2</div>
    </template>
    <script>
    import bus from "./bus.js"
    export default{
    mounted(){
    //通过on监听事件,回调方法获取数据
    bus.$on("bload",value=>{
    console.log(value);
    //this.busListen(value)//调用busListen这个方法
    });

    }
    }
    </script>
     

    注:可以在main.js写(这是常用的方式)

    Vue.prototype.bus = new Vue();
    调用方法的时候直接书写以下代码就行

    ##~~a.vue

    this.bus.$emit("bload");
    ##~~b.vue

    mounted中写:

    this.bus.$on("bload",this.bload);
    methods中写:

    methods:{
    bload(){
    }

    原文链接:https://blog.csdn.net/xiasohuai/article/details/80664605

    本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

  • 相关阅读:
    【回溯】数字排列问题
    Price List
    NanoApe Loves Sequence-待解决
    【回溯】n皇后问题
    安卓 学习之旅 入门
    mysql链接 显示 error: 'Access denied for user 'root'@'localhost' (using password: NO)'
    javaweb 实战_1
    java 插件安装
    leetcode 最长有效括号
    hdu 1074 Doing Homework
  • 原文地址:https://www.cnblogs.com/huchong-bk/p/12038464.html
Copyright © 2011-2022 走看看