vue组件通信 vue bus方面的总结

╰半夏微凉° 2021-08-13 11:30 467阅读 0赞

vue bus通常使用在兄弟与兄弟组件之间

然后在组件中，可以使用emit  on,  $off分别来分发，监听，取消监听事件  这里的$off可以取消多次使用$bus监听的事件

使用用法
           1：引入vue  import Vue from 'vue'
           
           2：在main.js中引入vue bus      import Bus from '***/***/bus';   Vue.prototype.$bus = Bus
          
           3：使用方法   this.$bus.$emit("Page",value); //很像父子之间传值的方法
           
           4：接收     
                  this.$bus.$on("Page", v =>{   //vaPage传的时候的key是什么接收就必须是什么
                   console.log(v);   //v是传来的值，可以接收多个参数
                   })
           
          5：总结
                 使用$bus的时候在接受bus的组件中别忘了再beforDestroy函数中销毁bus，
                 不销毁的话会一值  叠加的调用这个方法：
          beforDestroy（）{
             this.$bus.$off("vaPage");  //当这个组件销毁的时候bus也跟着一起销毁
         }

##  实战案例  ##

<template>
      <div class="email"> 
        <button @click="handleClick">click me</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        handleClick(){
          this.$bus.$emit("on-click","hello");
        }
      },
    }
    </script>

<template>
      <div class="tel">
        <p>{
       { message }}</p>
      </div>
    </template>
    
    <script>
    export default {
      data(){
        return{
          message:""
        }
      },
      mounted() {
        this.$bus.$on("on-click", msg=>{
          this.message = msg
        })
      },
    }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，467人围观）

还没有评论，来说两句吧...

相关阅读

相关 VUE组件通信bus

一、语法：用于组件通信，这两个组件可以是父子关系、兄弟关系，也可以没有任何关系。bus使用$emit， $on， $off 分别来分发、监听、取消监听事件。使用方法：

痛定思痛。/ 2023年01月22日 11:52/ 0 赞/ 183 阅读

相关 Vue组件通信 (六)

目录 1. 父向子组件通信 1.1 props 1.2 ref 1.3 children 2. 子向父组件通信

- 日理万妓/ 2022年12月13日 01:37/ 0 赞/ 210 阅读

相关 vue 组件通信

1.父子组件通信父传子（1）通过在父组件v-model绑定数据，在子组件进行用props进行数据的接收父组件 <template>

╰半橙微兮°/ 2022年11月20日 08:18/ 0 赞/ 259 阅读

相关 vue组件通信

文章目录父组件给子组件传递数据关于props 子组件给父组件传递数据在组件中使用

淡淡的烟草味﹌/ 2022年11月04日 05:55/ 0 赞/ 265 阅读

相关 Vue组件间通信

什么是Vue组件？ [组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，V

偏执的太偏执、/ 2022年06月07日 11:24/ 0 赞/ 286 阅读

相关 vue组件传值(通信)方式总结

使用VUE开发有一段时间了，一直都没有整理一下相关知识，今天总结下开发过程中所遇到的一些坑，主要给大家总结一下VUE组件传值的几种常用方法： 1，路由传参（参数，可以查询）

小鱼儿/ 2022年05月19日 13:07/ 0 赞/ 313 阅读

相关 Vue 组件通信

父组件 -> 子组件 props　 <my-component :date="date"></my-component> 注意：如果子组件定义props名称使用了

小灰灰/ 2022年01月07日 18:29/ 0 赞/ 362 阅读

相关 vue组件通信

对于vue来说，组件之间的消息传递是非常重要的，下面是我对组件之间消息传递的常用方式的总结。 props和$emit(常用) $attrs和$listeners

Myth丶恋晨/ 2021年09月02日 03:34/ 0 赞/ 591 阅读

相关 vue组件通信 vue bus方面的总结

vue bus通常使用在兄弟与兄弟组件之间然后在组件中，可以使用emit on, $off分别来分发，监听，取消监听事件这里的$off可以取消多次使用$bus监听的

╰半夏微凉°/ 2021年08月13日 11:30/ 0 赞/ 468 阅读

相关 Vue 组件数据通信方案总结

背景初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图： ![format_png]

Dear 丶/ 2021年07月26日 16:50/ 0 赞/ 380 阅读