vue中$on和$emit通信笔记

最新推荐文章于 2023-06-10 23:38:48 发布
最新推荐文章于 2023-06-10 23:38:48 发布
阅读量155 收藏 1
点赞数
分类专栏： $on $emit vue通信 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15145229/article/details/119141765
版权
本文介绍了在Vue.js中如何使用$emit和$on进行组件间的通信。首先，创建一个桥梁文件asidenum.js作为通信媒介。发送方通过$emit触发事件并传递数据，接收方在mounted钩子中利用$on监听事件。关键在于确保双方都引入了桥梁文件，并且事件标识匹配。
摘要由CSDN通过智能技术生成

过程

1、建立桥梁

在任意目录中，创建asidenum.js文件，可以把asidenum换成其他，比如index.js，until.js都可以
asidenum.js代码

import Vue from 'vue'
export default new Vue()

2、发送方：使用$emit(事件标识名event,要传递的数据)注册触发事件

注意别把桥梁忘了
要引入桥梁 import AsideNum from ‘./js/asidenum’

<template>
  <div id="User_aside">
    <el-row class="tac">
      <el-col>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="0">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          <
最低0.47元/天 解锁文章
linzhi_weihh
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
$emit和$on 的使用
hellow_d的博客
06-22 5832
一、$emit 1、this $emit（'自定义事件名',要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 三、接下来我们通过一个实例来解释 1、想要实现的 点击上一页、下一页，分别展现那页的内容。 数据刷新 废话不多说，上代码 以下是子组件 父组件代码 ...
Vue笔记，Vue笔记，Vue笔记
07-18
Vue笔记主要涵盖了从基础到进阶的各种Vue知识，通过一系列的学习日程，旨在帮助开发者深入理解和熟练掌握Vue框架。 在"Day 01"，通常会介绍Vue的基础概念，包括Vue实例的创建、模板语法、数据绑定（如`v-bind`和`v-...
vue2.0 中#$emit,$on的使用详解
12-29
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。 例子： //父组件 <template> <ratingselect select-type=onSelectType></ratingselect> </template> [removed] data ()
$emit和$on（bus.$on）
碉堡飞哥的博客
05-29 1万+
一、$emit 1、this $emit（'自定义时间名',要传送的数据）； 2、触发当前实例上的时间，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 经典案例： 子组件： 父组件： 这里需要强调的一点是：on和emit事...
实现vue中的$on $emit
weixin_30256505的博客
03-10 128
var eventList = { 'sayName': [sayName] } var name = 'hehe' var age = 28 function sayName() { console.log(this.name) } ...
B站vue笔记.doc
05-21
组件创建分为全局和局部注册，通过`props`进行父子组件间的数据传递，使用`$emit`进行子组件向父组件的通信。 15. **插槽[slot]**：用于组件内容分发，分为基础插槽、具名插槽和作用域插槽，其中作用域插槽允许父...
Vue笔记个人课程.zip
08-28
这篇“Vue笔记个人课程”旨在帮助初学者掌握Vue的核心概念和技术，通过案例实践来提升编程技能。 1. **Vue的基本概念** - **Vue实例**：Vue应用的核心就是Vue实例，它是Vue构造函数的产物，包含了Vue的所有选项，...
vue学习笔记 学习笔记
05-07
这篇学习笔记主要涵盖了Vue的核心概念，包括组件通信、非父子组件间通信以及路由管理和状态管理。 ### 父子组件通信 #### 1) Props和`$emit` **Props** 是Vue中父组件向子组件传递数据的主要方式。在父组件中定义...
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
Vue.js 中的 $emit 和 $on 方法有什么区别？
Java徐师兄的博客
06-10 1817
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
【vue】用$emit与$on来进行数据传输通信
michiko98的博客
07-19 304
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type="text/javascript">
Vue $emit 和 $on的用法
wjswangjinsheng的博客
03-30 7569
一、$emit 1、this $emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、this.on(′事件名′,callback)callback回调on('事件名',callback) callback回调on(′事件名′,callback)callback回调emit要传送的数据； 2、监听当前实例上自定义事件； 三、实例 <html> <head> <title>$emit 和 $on&l
Vue中$emit和$on的用法
科技向善
02-15 1万+
代码示例： <div id='app'> <button @click='boost' > 触发事件</button> </div> new Vue({ el: '#app', data() { return { message: 'hello vue' } }, created() { this.$on('my_even...
vue基础-浅谈vue中$emit和$on的基本用法
my_best95的博客
05-31 2123
1、简介： $on/$emit：实现了事件的定义和消费，通过事件的定义与消费分开进而实现解耦，也达到了组件之间通讯的效果。$on定义事件/并且指定时间的执行对象/函数，$emit 事件的消费。 2、示例 $on的简单代码实例 <template> <div> <h1>定义事件</h1> <v-emit></v-emit> </div> <...
$emit和$on 的使用详细演示
轻风细雨_林木木
10-28 2356
一、$emit 1、this $emit（'自定义时间名',要传送的数据）； 2、触发当前实例上的时间，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 三、$on 的使用 首先创建一个vue的空白实例（兄弟间的桥梁） // busVue.js import Vue from 'vue' export default
vue.js $emit,$on的使用
热门推荐
lixiwoaini的博客
07-10 1万+
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。 例子： ...
vue3 $emit $on
最新发布
04-27
$emit和$on是Vue 3中用于实现组件之间通信的两个方法。 $emit是一个用于触发自定义事件的方法。在一个组件中，你可以使用$emit方法来触发一个自定义事件，并传递一些数据给其他组件。其他组件可以通过$on方法来监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值