精华内容
下载资源
问答
  • vue bus

    2020-08-31 10:47:28
    vue bus使用 新建bus.js import Vue from 'vue' const bus = new Vue() export default bus 在需要用到的组件引入 import bus from "../bus" 在A组件使用传参: e:需要传的参数 bus.$emit('handClick',e) 在B...

    vue bus使用

    新建bus.js

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

    在需要用到的组件引入

    import bus from "../bus"
    

    在A组件使用传参:

      e:需要传的参数
      bus.$emit('handClick',e)
    

    在B组件使用:

    e:接收传过来的参数
    mounted () {    
      bus.$on('handClick', e=>{
        console.log(e)
      })  
    }
    
    父传子:props属性传值
    
    父获取子方法数据:
           在子组件定义一个ref
           <man ref="content"></man>
    
    在父组件使用:
            this.$refs.content.methods
            this.$refs.content.data
    
     子组件主动获取父组件的数据和方法
              this.$parent.data
              this.$parent.methods
    
    展开全文
  • VueBus

    2020-06-16 18:46:02
    VueBus(Vue事务总线) Vuex:主要用来存储数据 Bus:公交车 先有接收方: 监听动作 再有触发方: 触发的动作 分三步:导入到项目 1,下包(导包),导入文件, 2,在项目中配置,引入到项目 3,使用 1. 创建一个bus...

    VueBus(Vue事务总线)

    Vuex:主要用来存储数据

    Bus:公交车

    先有接收方: 监听动作

    再有触发方: 触发的动作

    分三步: 导入到项目

    1, 下包(导包), 导入文件,

    2, 在项目中配置,引入到项目 

    3, 使用

    1. 创建一个bus文件夹,里面有个js文件

    import Vue from 'vue'
    const Index = new Vue()
    export default Index

    2.在A,B组件中引入js文件

    1)left

    <template>
      <div>
        <div class="left-div" @click="click1(1)">首页</div>
        <div class="left-div" @click="click1(2)">百度</div>
        <div class="left-div" @click="click1(3)">淘宝</div>
      </div>
    </template>
    
    <script>
    import Bus from '../bus'
    export default {
      name: 'Left',
      methods: {
        click1: function (parm) {
            //第一种
            // Bus.$emit('change', parm)
    
            //第二种
            this.$Bus.$emit('change', parm)
        }
      }
    }
    </script>
    
    <style scoped>
    .left-div{
      height: 30px;
      line-height: 30px;
      border-bottom: 1px solid silver;
    }
    
    </style>
    

    2)right文件

    <template>
      <div>
        <right1 v-if="tag == 1" style="width: 100%; height: 100%;">
          首页
        </right1>
        <right2 v-else-if="tag == 2" style="width: 100%; height: 100%;"></right2>
        <right3 v-else-if="tag == 3" style="width: 100%; height: 100%;"></right3>
      </div>
    </template>
    
    <script>
    import Bus from '../bus'
    import Right1 from './Rigt/Right1'
    import Right2 from './Rigt/Right2'
    import Right3 from './Rigt/Right3'
    export default {
      name: 'Right',
       data () {
            return{
                tag: 0
            }
       },
      components: {
        Right1,
        Right2,
        Right3
      },
      mounted() {
          //可能这是第一种方法
          // Bus.$on('change', parm => {
          //    this.tag = parm
          // })
          
          //这是第二种方法:
          this.$Bus.$on('change', parm => {
             this.tag = parm
          })
      }
    }
    </script>
    
    <style scoped>
    
    </style>
    

    3)在A组件中要定义调用B事件的bus事件名

     Bus.$emit('change', parm)

    4)在B组件中调用C方法

    Bus.$on('change', parm => {
        this.tag = parm
    })
    //第一个参数是在A组件中定义的名字
    //第二个参数是要调用的方法

     

    一个页面是如何产生的?

    展开全文
  • Vue bus

    2021-07-09 16:29:24
    bus主要实现组件之间的...const bus = new Vue() export default bus 父页面 <template> <div class="demo-wrapper"> <comA /> <comB /> </div> </template> <script&

    bus主要实现组件之间的通信,较于组件之间的子传父,父再传另一子组件方便了很多

    首先创建一个bus.js

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

    父页面

    <template>
      <div class="demo-wrapper">
        <comA />
        <comB />
      </div>
    </template>
    
    <script>
    import comA from "./componentA";
    import comB from "./componentB";
    export default {
      components: {
        comA,
        comB,
      },
    };
    </script>
    

    组件A

    <template>
      <div>
        <button @click="handleClick">点我修改B的值</button>
      </div>
    </template>
    
    <script>
    import bus from "@/utils/bus";
    export default {
      data() {
        return {};
      },
      methods: {
        handleClick(){
          bus.$emit('busChange','A传递给B的值')
        },
      },
    };
    </script>
    
    <style>
    </style>
    

    组件B

    <template>
      <div></div>
    </template>
    
    <script>
    import bus from "@/utils/bus";
    export default {
      data() {
        return {};
      },
      mounted() {
        bus.$on("busChange", (e) => {
          console.log(e);
        });
      },
      methods: {},
    };
    </script>
    
    <style>
    </style>
    

    以上简单的功能就实现了

    接下来进行进一步的封装,能够更方便的去使用它

    vue-bus.js

    const install = function(Vue) {
        const Bus = new Vue({
            methods: {
                emit (event, ...args) {
                    this.$emit(event, ...args);
                },
                on (event, callback) {
                    this.$on(event, callback);
                },
                off (event, callback) {
                    this.$off(event, callback);
                },
            }
        })
        Vue.prototype.$bus = Bus;
    }
    
    export default install;
    

    在main.js中引用:

    import VueBus from './vue-bus';
    Vue.use(VueBus);
    

    接在来就可以在项目中使用了

    this.$bus.on('busChange',(e)=>{
    	
    });
    
    this.$bus.emit('busChange','要传的值,也可以是方法')
    
    展开全文
  • vue bus 使用

    2021-03-05 11:08:11
    简单记录一下vue bus 实现组件之间传值

    vue bus 使用

    1. 定义bus

    import Vue from 'vue'
    
    const Bus = new Vue();
    
    export default Bus;
    

    2.导入

    // 导入bus
    import bus from './Bus'
    
    Vue.prototype.bus = bus;
    

    3.使用

    //Component List
    this.bus.$emit('goodInfo',res.data);
    
    //Component Add
    this.bus.$on('goodInfo', msg => {
    	console.log(msg)
    }
    
    展开全文
  • 第一步:创建 vueBus.js文件(在utils目录下) // vueBus.js import Bus from 'vue'; let install = function (Vue) { Vue.prototype.$bus = new Bus() } export default { install }; 第二步:在main.js中引入vue...
  • import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的作用域要指向当前的vm实例,on监听事件一般...
  • 创建/src/utils/vuebus.js import Vue from 'vue'; export default new Vue(); 发送和接受消息的页面引入vuebus import Bus from '@/utils/vuebus' 发送页面使用VUEBUS向外传递参数 Bus.$emit("PARAM_
  • Vue BUS总线

    2020-12-22 10:27:44
    Vue Bus 总线 作用:在vue中实现非父子组件之间通信。 场景:bus适合小项目、数据被更少组件使用,或者数据量少的项目。 本质:实际上是一个发布订阅者模式的使用,利用 vue 的自定义事件机制,在触发时通过 $emit ...
  • vue bus通常使用在兄弟与兄弟组件之间 然后在组件中,可以使用emit on, $off分别来分发,监听,取消监听事件 这里的$off可以取消多次使用$bus监听的事件 使用用法 1:引入vue import Vue from 'vue' 2:在...
  • import VueBus from 'vue-bus' Vue.use(VueBus) NewDialog录入数据后把事件抛给父组件CustomerFollow.vue, TaskLog, NewDialog都是CustomerFollow的子组件 *CustomerFollow.vue ... // 新建任务提交 dialo...
  • vue Bus总线

    2018-11-24 14:15:32
    vue Bus总线 有时候两个组件也需要通信(非父子关系)。当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。 参考:...
  • 1 定义vuebus VueBus.js /** * bus * @Author Canaan * @Date 2018/6/7. */ const install = function (Vue) { /** * 环境 * @type {{}} */ Vue.prototype.$env = { LOGIN_SUCCESS...
  • 主要介绍了解决vue bus.$emit触发第一次$on监听不到问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue bus传参

    2020-07-14 10:55:17
    新建一个js文件,命名为bus.js。bus.js文件的内容为: import Vue from 'vue' const bus = new Vue() export default bus 页面demo.vue包含两个...在a.vue和b.vue分别引入bus.js(例如:import bus from “@/util/bu
  • 文章目录介绍测试跳转vue Bus总线 介绍 Mock.js的特点: 1,前后端分离 让前端攻城师独立于后端进行开发。增加单元测试的真实性,通过随机数据,模拟各种场景。 2,开发无侵入 不需要修改既有代码,就可以拦截 Ajax ...
  • vue bus 使用方法

    2020-10-09 22:46:04
    作用:兄弟之间相互传值 1、在src文件下创建一个bus文件夹, 在文件夹下创建一个index.js 代码如下 // 三部曲 // 1、引用vue import Vue from 'vue' ...Vue.prototype.$bus=bus 传值 this.$bus.$emit("vaP
  • vue bus总线

    2019-09-23 05:46:34
    问题:解决兄弟组件通信的问题,当然你也可以选择vuex 首先三个组件main.vue, child1.vue, child2,...方法一:使用一个空的Vue实例(bus.js)作为中央事件总线。 bus.js import Vue from 'vue'; const bus = ne...
  • vue bus通信

    2019-09-30 13:12:18
    const eventBus = { install(Vue,options) { ... Vue.prototype.$bus = vue } }; Vue.use(eventBus); View Code methods: { //分发事件 todo: function () { this.$bus.$emit...
  • vue bus 用法

    2020-04-01 18:01:53
    公共bus.js //bus.js import Vue from 'vue' export default new Vue() 组件A <template> <div> A组件: <span>{{elementValue}}</span> <input type="button" value="点击触发...
  • vue bus的使用

    2020-12-09 20:18:49
    const bus = new Vue(); export default bus; 2.在需要通信的组件都引入bus.js from后面就改成你的所放bus.js文件的位置 import Bus from './bus.js' 3.需要发送事件的组件使用 bus.$emit 发送事件 this.$bus.$...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,962
精华内容 4,784
关键字:

vuebus

vue 订阅