vue 组件传值（二）$bus，$emit，$on

最新推荐文章于 2024-07-12 10:29:38 发布
最新推荐文章于 2024-07-12 10:29:38 发布
阅读量1k 收藏 1
点赞数 2
分类专栏： js 文章标签： vue 组件传值 bus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40891322/article/details/110482057
版权

vue 组件传值（二）$bus，$emit，$on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>  
    <title>$bus</title>
</head>
<body>
    <div id="app">
    </div>
    <script>
        // new一个空的vue挂在到vue原型上
        Vue.prototype.$bus = new Vue();
        Vue.component('Child2',{
            template : `<div>
                            <input type="text" v-model="msg">
                        </div>`,
            data(){
                return {
                    msg : ''
                }
            },
            created(){
                this.$bus.$on('myevent',(val)=>{
                    console.log('接受到来自兄弟一的数据'+val);
                    this.msg = val;
                })
            },
            destroyed() {
            //组件销毁前尽量关闭bus
            this.bus.$off('myevent')
            }
        });
        Vue.component('Child1',{
            template : `<div>
                            <p>{{myprop}}</p>
                            <input type="text" @input="changeValue(myprop)" v-model="myprop">
                        </div>`,
            data(){
                return {
                    myprop : 'child1'
                }
            },
            methods : {
                changeValue(val){
                    this.$bus.$emit('myevent',val);
                }
            }   
        });
        Vue.component('Parent',{
            //记住template中只能有一个根元素，不然只显示第一个元素，后面都不显示
            template: `<div>
                        兄弟一：<Child1></Child1>
                        兄弟二：<Child2></Child2>
                        </div>`,
        });
        new Vue({
            el : '#app',
            template : '<Parent><Parent>'
        });
    </script>
    
</body>
</html>

在这里插入图片描述
最重要的三句话：
（1）Vue.prototype.$bus = new Vue();// new一个空的vue挂在到vue原型上
（2）this.$bus.$emit('myevent',val);//需要传值的组件用
（3）接受传值的组件用：

this.$bus.$on('myevent',(val)=>{
                    console.log('接受到来自兄弟一的数据'+val);
                    this.msg = val;
                })

该方式适用于兄弟组件直接传值使用。

啊啊啊～～
关注
专栏目录
兄弟组件传值，$emit和$on的使用
m0_46360310的博客
08-14 745
使用之前 使用之前需要注册总线事件 先创建一个空的示例，并且将自定义的$bus绑定到原型上 Vue.prototype.$bus = new Vue() $emit 发送数据用的 $emit(‘事件名’ , ‘数据’ ) <template> <div> 组件B <button @click="send">发送</button> </div> </template> <script> export defau
事件总线：vue中$bus的使用和涉及到的问题(兄弟组件之间传值)
bigdargon的博客
12-12 771
$bus传值
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
10-15
主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue中$bus.$emit和$bus.$on的用法温故
ldcaws的专栏
06-05 599
$bus. $emit、 $bus. $on 用于非父子组件之间通信。
Vue3 中的 bus.$emit：实现组件通信的强大工具
最新发布
专注基础架构领域
07-12 819
bus.$emit的重要性体现在以下几个方面： 实现组件通信：在 Vue 中，组件之间通常是独立的，无法直接访问彼此的状态或方法。通过使用bus.$emit，我们可以在不同的组件之间传递事件，从而实现组件通信。 解耦组件：使用bus.$emit可以避免在组件之间直接依赖和耦合。组件只需要监听感兴趣的事件，并在事件发生时做出相应的反应，而无需关心事件的来源和具体实现。 可复用性：通过将事件和事件监听器抽象到一个全局的bus对象中，可以提高代码的可复用性。不同的组件可以共享同一个bus，并在需要时进行通信
探索 Vue 中的 bus.$emit：实现组件通信的强大工具
你若盛开，清风自来
11-25 2551
在 Vue 中，父子组件之间可以通过 props 和 events 进行通信。 然而，当需要在多个不相关的组件之间进行通信时，使用bus.$emit可以提供一种更灵活的方式。
手写VueBus实现Vue组件间传值
SEKIRO_DJ的博客
08-03 439
手写一个构造函数用于vue组件传值 class Bus { constructor () { this.list = {} } $on (name, fn) { this.list[name] = this.list[name] || [] this.list[name].push(fn) } $emit (name, data) { if (this.list[name]) { this.list[name].forEach(fn =&g
vue中$emit与$on和BUS
az44yao的专栏
07-02 496
vue中$emit与$on和BUS bus： //vue原型链挂载总线 Vue.prototype.bus = new Vue(); //子组件发送数据 this.bus.$emit("change",data); //子组件接收数据 this.bus.$on("change",function(data){ }) vue中$emit与$on 　　var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法； 　　Even.
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
这两个方法主要用于子组件向父组件传递信息，因为 Vue 默认不支持子组件向父组件直接传递值，而 `$emit` 和 `$on` 的组合恰好解决了这个问题。 在 Vue 中，`$emit` 是子组件用于触发自定义事件的方法，通常伴随着...
vue组件传值
m0_56044524的博客
04-09 341
vue组件传值1、父组件给子组件传值新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1、父组件给子组件传值 // An highlighted block var foo = 'bar';`在这里插入代码片` 新的改变
html中js向vue组件传值,Vue 组件之间传值
weixin_26850469的博客
06-18 1112
#同一个路由下，父向子组件传值props属性 -- 单向绑定import childOne from '../components/childOne.vue';export default{data() {return{msg: '我是动态data中的数据！'}},components: {childOne}} {{ info }} {{ msg }} export default{props:...
vue的$bus的使用
qq_36566924的博客
10-08 287
1.引入 Vue.prototype.$ bus = Vue. prototype.$ bus||new Vue(): 2.定义方法 this.$ bus.$ on(“methods”,id=>{}) 3.方法的调用 this.$ bus.$ emit(“methods”,data)
Vue 兄弟组件之间传值 Bus方法
i_am_a_div的博客
10-19 634
Vue 兄弟组件之间传值 Bus方法
vue中$bus的用法及$emit、$on、$off的使用
热门推荐
ldcaws的专栏
12-06 1万+
vue中 $bus 一般与 $emit、 $on、 $off 连用，一般用在任意组件间的通信，即 $bus 用来传递非父子关系的数据。 如两个组件之间传递数据： 子组件1 子组件2 1、$emit2、$on注意：$emit 和 $on 的事件必须在一个公共的实例上，才能够触发。3、实例事件 实例事件就是在构造器外部调用构造器内部的数据。4、实例 在Student组件中提供数据给另一个School组件 在School组件中使用事件总线，接收数据。School组件想接收数据，则在School组件中给 $bus绑
组件传值:父子$emit,props.兄弟$bus.$on.$emit,
wangyangzxc123的博客
11-21 605
1.父子传值 父传子通过事件绑定.在父结构上的子标签能添加 //子组件的标签 < :需要传递的名字='父组件需要传递的值' > 子组件通过props接收 export default { props:['父定义的名字'] } 2.子给父传值 通过事件绑定的方式 在子组件中定义 methods:{ 事件名(){ this.$emit('这里是自定义的任何名字用于传给父组件接收',参数可填可不填.根据情况而定) } } 父组件
vue 非父子组件兄弟组件之间的通信 $bus 中央事件总线 this.$bus.$off this.$bus.$on this.$bus.$emit
qq_43039004的博客
09-12 2215
非父子通信不同于父子通信，首先我们要需要创建一个做中央事件总线 在main.js里 Vue.prototype.$bus = new Vue(); 然后我们就可以通过this.$bus.$emit 和this.$bus.$on 来完成非父子之间的通讯 jump(){ this.$bus.$emit('updata','参数') this.$router.push({ path:'/aaa' }) }, mounted(){ this...
vue组件通信 vue bus方面的总结
前端小99的博客
01-13 990
vue bus通常使用在兄弟与兄弟组件之间 然后在组件中，可以使用emit on, $off分别来分发，监听，取消监听事件 这里的$off可以取消多次使用$bus监听的事件 使用用法 1：引入vue import Vue from 'vue' 2：在main.js中引入vue bus import Bus from '***/**...
Vue中事件总线$bus的用法及$on、$off和$emit的使用
初辰的博客
01-19 1850
【代码】Vue中事件总线$bus的用法及$on、$off和$emit的使用。
$bus.$emit父子之间传值
07-15
你可以使用 Vue 的事件总线 `$bus`（或者更常见的是 `$emit` 和 `$on`）来在父组件和子组件之间传递值。下面是一个简单的示例： 在父组件中，使用 `$emit` 来触发一个自定义事件，并传递值给子组件： ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

啊啊啊～～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值