Vue 在同级组件中传值（$emit、$on 的使用）

最新推荐文章于 2023-02-18 23:26:00 发布
最新推荐文章于 2023-02-18 23:26:00 发布
阅读量536 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jwen1994/p/10993446.html
版权

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <dom-a></dom-a>
            <dom-b></dom-b>
            <dom-c></dom-c>
        </div>
        <script type="text/javascript" src="../js/vue.min.js"></script>
        <script type="text/javascript">
            var Event = new Vue();

            var A = {
                data() {
                    return {
                        a: '我是a组件中的数据'
                    }
                },
                template: `
                    <div>
                        <span>我是A组件的数据->{{a}}</span>
                        <input type="button"  value = '把A数据传给C' @click = 'send'/>
                    </div>
                `,
                methods: {
                    send() {
                        // $emit('事件名字',数据)

                        // this.$emit()
                        console.log(this);
                        Event.$emit('a-msg', this.a);

                    }
                }
            };
            var B = {
                data() {
                    return {
                        b: '我是b组件中的数据'
                    }
                },
                template: `
                    <div>
                        <span>我是A组件的数据->{{b}}</span>
                        <input type="button"  value = '把B数据传给C' @click = 'send'/>
                    </div>
                `,
                methods: {
                    send() {
                        // $emit('事件名字',数据)
                        // this.$emit()
                        console.log(this);
                        Event.$emit('b-msg', this.b);
                    }
                }
            };

            var C = {
                data() {
                    return {
                        a: '',
                        b: ''
                    }
                },
                template: `
                    <div>
                        <h3>我是C组件</h3>
                        <span>接收A组件的数据为：{{a}}</span>
                        <br />
                        <span>接收B组件的数据为：{{b}}</span>
                    </div>
                `,
                mounted() {
                    // 接收A中的数据

                    // $on('事件名',fn(a))
                    Event.$on('a-msg', (a) => {
                        this.a = a;
                    });
                    // 接收A中的数据
                    Event.$on('b-msg', (b) => {
                        this.b = b;
                    });
                },
            }
            new Vue({
                el: '#app',
                components: {
                    'dom-a': A,
                    'dom-b': B,
                    'dom-c': C
                }
            })
        </script>
    </body>
</html>

 

转载于:https://www.cnblogs.com/jwen1994/p/10993446.html

吃素的小动物
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue页面(组件之间传值)
sdfvsdfsdfsdfsd的博客
04-16 92
Vue页面(组件之间传值) 跳转按钮所在页的跳转方法内 XXXX(data){ this.$router.push({ name:'XXXXXXX', //跳转路由的名字 params: { sta : data //参数名 和数据 } }) } 接收数据页，将方法写入 mounted() { this.XXXX(); }, 在XXXX方法中直接调用
vue——三种常见的传值方式，子传父、父传子、同级传值
Sunshine0508的博客
05-30 5058
父组件向子组件传值 父组件 <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --> <child :inputName="name"></chi...
vue组件之间的数据传递
qq_45447899的博客
02-01 264
一般来说在vue的数据传递是在父组件传子组件通过属性来传，子组件传父组件通过事件来传值。
vue同级组件传值
qq_30815659的博客
03-30 6847
vue中 父组件向子组件传递参数时，可以通过prop来传递参数，prop可以是数组形式，也可以是对象格式，子向父组件传递参数时，通过$emit来传递，$emit（'方法名', 传参），来实现子组件和父组件数据交互，但是在父组件中，有好多个子组件，这些子组件怎么样来进行数据通讯呢？ 有的同学会立马想到 vuex ，答案是：可以的，但是会不会大材小用？，在项目中，只是个别组件需要用到通讯，我们是不会优先考虑vuex来解决的。 下面我们可以使用一个特别好用的方法来实现兄弟组件之间数据通讯 bus.js 顾名
vue 探讨同级组件间值的传递（$on,$emit的综合运用）
sennyla的博客
02-08 3817
想法：最近在做一个数据处理分析的系统，页面比较多，一些共用的功能也比较多，于是想起了组件化开发，想着一个组件封装好了就可以在项目的各个地方直接引入，无需再次重复编写。举例：头部的导航栏抽出，登录模块抽出，登录按钮存放在头部导航栏里，点击按钮的时候显示/隐藏登录模块，（因登录模块在后台页面里的某个地方将再次需要，只是调起的方式不一样）。一开始登录模块默认隐藏状态，点击登录按钮时设置一个变量存放点击的...
vue3 组件间互相通信（包括父子、爷孙、兄弟、全局）
热门推荐
技术前端，忠于热爱 @回忆哆啦没有A梦
04-11 2万+
vue3 组件间通信方式（包括父子、爷孙、兄弟、全局），最全面的组件通信方式。
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
在 Vue 中，$emit 与 $on 是两个非常重要的函数，它们用于实现组件之间的数据传输。下面，我们将详细介绍 Vue 中的 $emit 与 $on 父子组件与兄弟组件之间的通信方式。 父组件传值给子组件 在 Vue 中，父组件可以...
vuejs使用$emit和$on进行组件之间的传值的示例
11-26
在组件化开发中，数据流动是非常关键的一部分。Vue 提供了多种方式来处理组件间的通信，其中包括 `$emit` 和 `$on`。这两个方法主要用于子组件向父组件传递信息，因为 Vue 默认不支持子组件向父组件直接传递值，而 `...
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue2.0 中#$emit,$on的使用详解
08-30
Vue 2.0 中 $emit 和 $on 的使用详解 Vue 2.0 中 $emit 和 $on 是两个非常重要的概念，它们用于实现组件之间的通信。$emit 用于触发事件，而 $on 用于监听事件。 $emit $emit 是 Vue 2.0 中用于触发事件的方法。...
Vue3学习之第五节： 组件通信
weixin_44209082的博客
04-30 239
一、props（父子组件传值） 父子组件传值要使用setup函数中的参数来实现。 setup 主要有两个参数：     第一个参数：props ：父组件传递过来的属性会被放到props对象中     第二个参数：context：包含3个属性，如下：         attrs：所有的非prop的attribute         slots：父组件传递过来的插槽         emit：当我们组件内部需要发出事件时会用到emit 父组件向子组件传值 父组件中： <template>
vue3 组件间的消息传递（事件总线）
m0_37191919的博客
06-25 2566
前言：刚开始学vue语言，在组件间传递消息时需要有一个事件总线，但是使用vue2的$emit、$on、$off和$once，在创建新的Vue实例时会报错： "export 'default' (imported as 'Vue') was not found in 'vue' vue2的消息传递是创建Vue实例，并用自己创建Vue实例实现组件内部监听，如下： msg.js import Vue from 'vue' export default new Vue A.vue ...
Vue 组件之间传值
忧郁的蛋的专栏
02-18 1万+
使用 props 和 $emit 可以实现父子组件之间的传值，使用 provide 和 inject 可以实现祖先组件向后代组件的传值，使用 Vuex 和 EventBus 可以实现任意组件之间的传值。假设我们有一个父组件和一个子组件，子组件需要接收父组件的一些属性和事件监听器，同时还需要把这些属性和事件传递给子组件的某个子元素。5、使用全局事件总线：可以使用 Vue 的事件机制，通过在 Vue 实例上使用 $on 来监听事件，然后在其他组件中使用 $emit 触发相应的事件来传递数据。
vue中子父组件传值使用$emit，$on，$off
杨欢博的博客
01-10 1167
子组件可以使用 $emit,让父组件监听到自定义事件 。 vm.$emit( event, arg ); //触发当前实例上的事件,arg是传递给父组件的参数 vm.$on( event, fn );//监听event事件后运行 fn vue也实现了观察者模式，提供了订阅消息，发布消息，注销消息等方法 $on(type, fn) 订阅消息方法 type:消息名称， fn:消息回调函数，参数是由$emit方法传递的 $emit(type, ...args) 发布消息方法 type:消息名称 .
vue $emit 和 $on的用法 （在同一个组件中）
weixin_42371812的博客
08-16 1199
百度之后，终于明白$emit 和 $on 的基础用法。不多说 ，直接上课。 $on('事件名字'); /监听事件，事件名字是 str型 $emit('事件名字',回调函数);//事件名字是 str型，当然，可以有多个事件名字，如果存在多个事件名字，那么就是用数组。 假设有一个按纽，希望在点击按纽之后触发某一个方法。那么我们可以这样。 <button @click='emit'>只触发一个方法</button> created () { this.$on('wash
$emit和$on 的使用
hellow_d的博客
06-22 5818
一、$emit 1、this $emit（'自定义事件名',要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 三、接下来我们通过一个实例来解释 1、想要实现的 点击上一页、下一页，分别展现那页的内容。 数据刷新 废话不多说，上代码 以下是子组件 父组件代码 ...
Vue中组件传值$on和$emit的编写
Asuria
07-27 828
这是关于实现$on和$emit以及$off的js文件 因为每次实现这些方法都要实例vue，这使一些vue不需要的功能也一起带进来了，不利于优化。 let callbackMap = {}; export default { // 添加事件监听 $on: function(eventName, callback){ // 按名字保存所有的回调函数 ...
Vue $on的用法
wnk1997的博客
02-10 8439
转载：https://www.cnblogs.com/jin-zhe/p/13100194.html ue中使用 $emit(eventName) 触发事件，使用 $on(eventName) 监听事件 $emit(eventName) 触发当前实例上的事件，附加参数都会传给监听器回调。 on(eventName)监听当前实例上的自定义事件。事件可以由vm.on(eventName) 监听当前实例上的自定义事件。事件可以由 vm.on(eventName)监听当前实例上的自定义事件。事件可以由vm.emi
vu e父子组件传值$emit
最新发布
08-30
在Vue中，可以通过使用$emit和$on方法来实现父子组件之间的数据传输。通过$emit方法，子组件可以将数据发送给父组件，而通过$on方法，父组件可以监听并接收子组件发送的数据。 具体来说，子组件可以在需要传递数据...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值