vue2开发中实例事件总结($on,$once,$off,$emit,$root,$refs,$parent 的使用)

Vue2之借助中间实例及$on与$emit方法实现两个不相干的组件之间通信 阅读详情

1.实例事件就是在构造器外部调用构造器内部的数据。

2.使用场景:比如构造器已经有一个加的方法,现在还要做一个减的方法,而我又不想动构造器里面的信息,那就可以使用实例事件了.
操作如下:
在这里插入图片描述
与$on对应的还有一个$once,上述代码只改一个单词$once

 app.$once('reduce',function(){
          console.log("减的方法触发了");
          this.num--
 })

结果:减的方法只执行一次.
$off关闭实例事件
关闭reduce后,减就失效了.

在这里插入图片描述
概述:$emit 、$on 、$once 、$off 的使用

1、vm.$emit(eventName,callback) 和vm.$on(eventName,callback) 一般结合使用。
$emit触发当前实例上的自定义事件(并将附加参数都传给监听器回调)
使用 $on 监听该事件并调用回调函数。
这两个事件方法可以结合props 属性实现父子组件双向传参。

2、vm.$once(eventName,callback) 监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器。

3、**vm.$off([eventName,callback]) 用来移除自定义事件监听器。**如果没有提供参数,则移除所有的事件监听器;如果只提供了事件,则移除该事件所有的监听器;如果同时提供了事件与回调,则只移除这个回调的监听器。

demo:$emit 和$on 实现父子组件双向传参
子组建:
在这里插入图片描述
父组件如下
在这里插入图片描述

demo父子组建携带参数传值:
父组件:
在这里插入图片描述
子组件如下
在这里插入图片描述
兄弟组件中的父亲组件(🚌公共汽车)
$on的使用场景:兄弟组件之间相互传递数据。
首先创建一个Vue的空白实例(兄弟组件的桥梁)
在这里插入图片描述

子组件A:发送放使用$emit自定义事件把数据带过去。

在这里插入图片描述
子组件B:接收方通过$on监听自定义事件的callback接收数据

在这里插入图片描述
二、概述:vue2中$root、$refs、$parent 的使用

1、$root 可以用来获取vue的根实例,比如在简单的项目中将公共数据放再vue根实例上(可以理解为一个全局 store ),因此可以代替vuex实现状态管理;

2、$parent 属性可以用来从一个子组件访问父组件的实例,可以替代将数据以 prop 的方式传入子组件的方式;当变更父级组件的数据的时候,容易造成调试和理解难度增加;

3、在子组件上使用ref特性后,this.$refs 属性可以直接访问该子组件。可以代替事件$emit 和$on 的作用。
使用方式是通过 ref 特性为这个子组件赋予一个 ID 引用,再通过this.$refs.testId获取指定元素。
注意:$refs 只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。

demo$root 属性获取根实例

在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问。例如,在这个根实例中:

// Vue 根实例
在这里插入图片描述
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用

在这里插入图片描述

demo:$refs 属性获取子组件实例
在这里插入图片描述

Vue—组件实例之$once 一、概述 $once是一个函数,可以为Vue组件实例绑定一个自定义事件,但该事件只能被触发一次,触发之后随即被移除。 二、实例 $once有两个参数,第一个参数为字符串类型,用来指定绑定的事件名称,第二个参数设置事件的回调函数。 <template> <div> <button @click="$emit('jpf')">按钮</button> </div> </template> <script&gt 阅读详情

相关推荐

vue2自定义事件实现子组件向父组件通信

vue2自定义事件实现子组件向父组件通信

weixin_62835765的博客 813

vue2中子组件向父传值$emit方法的使用

vue2中子组件向父传值$emit方法的使用。

ONLYSRY的博客 7344

STM32 移植FreeModbus详细过程

modbus是一个非常好的串口协议(当然也能用在网口上),它简洁、规范、强大。可以满足大部分的工业、嵌入式需求。 这里详细说下如何将freemodbus移植到stm32平台。我之前下载的版本是1.6,我会在我的下载链接里面加上1.6的freemodbus压缩包以及我已经移植好的stm32 for freemodbus版本。我上传的移植好的绝对没问题,经过多个板子测试。这里编译器使用的是keil5.28,单片机用的是STM32F103RCT6。 移植到VET6以及ZET6的话只需要改一下选择的芯片就好,改法:

qq_40305944的博客 8万+

vue2和vue3中,关于$emit的用法

vue2、vue3的emit使用

weixin_43534452的博客 4443

pytorch超详细安装教程,Anaconda、PyTorch和PyCharm整套安装流程

本文介绍基于Anaconda环境以及与PyCharm结合,安装PyTorch深度学习框架。

Bluebro的博客 19万+

使用pdfBox实现pdf转图片出现中文方块乱码 简单修改源码解决

参考文章 问题排查:使用pdfbox将pdf转image时STSong-Light字体中文乱码 pdfbox版本是2.0 日志中打印出类似这样的日志(例:Using fallback XXX for CID-keyed font STSong-Light),就说明系统没有安装STSong-Light字体,pdfbox使用XXX字体来替代了。如果出现方块,就说明没有这种字体,并且替代字体也没有,日志也有相应的其他提示。 正常操作就是安装缺失的 STSong-Light 字体,但是在网上搜到的都是 STSong

aji_csdn的博客 5266

vue2开发中$emit 、$on 、$once 、$off 的使用, vue中$root、$refs、$parent 的使用

一、vue2开发中$emit 、$on 、$once 、$off 的使用 简单概述: 1、vm.$emit(eventName,callback) 和$on(eventName,callback) 一般结合使用。使用$emit触发当前实例上的自定义事件(并将附加参数都传给监听器回调),使用$on 监听该事件并调用回调函数。这两个事件方法可以结合props 属性实现父子组件双向传参。...

zhouzuoluo的博客 1万+

Ubuntu 22.04下Colmap带CUDA支持的编译安装全攻略(附显卡架构查询指南)

本文详细指导在Ubuntu 22.04系统上从源码编译安装支持CUDA加速的Colmap,解决了官方版本无GPU支持导致处理速度慢的问题。重点包括环境依赖准备、CUDA工具链配置、显卡计算能力查询以及完整的编译安装步骤,旨在帮助研究者和开发者高效部署高性能三维重建工具。

gold8的专栏 343

vue组件之间通信的八种方式: props、$attrs、$root、$parent、$refs、$emit、依赖注入、Vuex

今天看vue的API,看到组件通信这一块,发现通信方式有好多种,但官网上的说明都是一笔带过,而且语句有点拗口,里面又有很多不理解的专有名词,以致于以前看的时间漏掉了很多东西,今天就好好总结一下。 1. props传值 props方式是用得比较多的: &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt; &amp;amp;lt;child :value=&amp;quot;msg&amp

qq_38513816的博客 2957

手把手教你用RMII接口配置以太网PHY芯片(附YT8512实战代码)

本文详细介绍了如何使用RMII接口配置以太网PHY芯片,以国产YT8512为例,提供从硬件设计到软件驱动的全流程实战指南。内容包括RMII接口技术解析、YT8512硬件设计要点、驱动开发实战代码及常见问题排查,帮助开发者快速实现以太网通信功能。

mac99的博客 994

【从零开始玩量化1】AKShare: Python开源财经数据接口库

文章目录量化的第一步:数据AKShare介绍AKShare安装AKShare使用AKTools安装/使用结语 量化的第一步:数据 想要玩量化,第一步要有数据,这个数据可能是历史交易数据、财务数据、宏观数据等等。我们最终要做的,无非就是从数据中分析出有价值的信息,以便用来指导投资策略。 在获取数据的这条道路上,我走了很多弯路,尝试了各种方法:使用Tushare到放弃、自己写网易股票页面的爬虫,自己写申万行业数据的爬虫、自己写同花顺问财的爬虫、使用聚宽的免费数据API等等,直到最终,我发现了AKShare。 A

量化投资助手的博客 5万+

vue实战指南 vue中$emit $refs $parent $children

Vue.js 是一个流行的前端框架,以其简洁的API和高效的性能著称。在构建复杂的单页应用(SPA)时,组件间的通信是一个常见的需求。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。包含一个输入框,我们希望通过父组件来获取或设置这个输入框的值。是一个数组,包含当前组件的所有直接子组件实例。,我们希望通过点击按钮来从子组件向父组件传递数据。,我们希望子组件能够直接访问父组件的数据。,我们希望通过父组件来操作所有子组件。引用当前组件的父组件实例。

一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身"农奴"把歌唱,一边打入敌人内部一边持续提升自己,为我们广大开发同胞谋福祉,坚决抵制睿智产品折磨我们码农兄弟! 1653

Android 13.0 app进程保活白名单功能实现

在13.0的系统rom产品开发中,在某些重要的app即使进入后台,产品需求要求也不想被系统杀掉进程,需要app长时间保活,就是app进程保活白名单功能的实现, 所以需要在系统杀进程的时候不杀掉白名单的进程,接下来就看怎么样来实现这些功能

安卓兼职framework和app工程师的博客 3141

vue中$refs, $emit, $on, $once, $off的使用详解

只能监听自定义事件。

coldriversnow的专栏 2939

Matlab 轴承信号仿真+分析

文章目录项目说明1、信号仿真1.1 仿真公式1.2 信号参数设置1.3 代码实现2、仿真信号分析2.1 小波变换2.2 快速谱峭度 项目说明 本文主要解决两个问题: 1、仿真包含周期性冲击信号、随机干扰冲击信号、调制干扰信号以及随机噪声四个成分的故障轴承信号; 2、使用小波变换以及快速谱峭度对该仿真信号进行分析。 1、信号仿真 1.1 仿真公式 这里的仿真信号公式主要参考了包文杰学者的硕士论文《加权谱峭度故障诊断方法研究与应用》,列举公式如下: 周期性冲击信号仿真 随机干扰冲击信号仿真 调制

cocofisher的博客 9267

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目,保存在这里方便以后使用直接下载

vue中$refs、$emit、$on、props、$parent的使用场景及方法

1、$emit的使用场景 子组件调用父组件的方法并传递数据 子组件: <template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent

weixin_42101753的博客 1052

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

vue中$refs、$emit、$on的使用场景

1、$emit的使用场景 子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: &lt;template&gt; &lt;button @click="emitEvent"&gt;点击我&lt;/button&gt; &lt;/template&gt; &lt;script&gt; export default { data() { ...

chaochao466的博客 2万+

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

vue中$refs, $emit, $on的使用

1.$refs的使用场景 父组件调用子组件的方法,可以传递数据。 父组件: <div id="app"> <child-a ref="child"></child-a> <button @click="getMyEvent">点击父组件</button> <div> <script> ...

Embrace924的博客 854

【Vue】全套$...方法使用

文章目录一、事件监听事件:$on监听一次:$once移除监听:$off触发事件:$emit二、数据监听数据:$watch添加数据:$set删除数据:$delete三、生命周期手动挂载:$mount()强制渲染:$forceUpdate()延迟更新:$nextTick()销毁实例:$destroy()四、属性根元素:$el根属性:$root父组件:$parent子组件:$children各组件:$refs各配置:$options() 一、事件 监听事件:$on $on:监听当前实例上的自定义事件。 事件可以

qq_45677671的博客 2499

VUE 父子组件的传递 props、$refs 、 $emit、$parent、$children、$root

转载:https://blog.youkuaiyun.com/alokka/article/details/87104189 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。 1.父向子 通过 p...

xqhys的博客 3004

vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件

vue中$root访问根组件、$parent和$emit访问父组件、$ref访问子组件

大前端 8219

vue父子组件通信(props、$refs 、 $emit、$parent、$children、$root)

vue父子组件通信(props、$refs 、 $emit、$parent、$children、$root)Vue组件间的通信非常重要下面一起学习吧!props,$emit功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 Vue组件

weixin_44705688的博客 947

callback用法 js vue_vue中$refs, $emit, $on, $once, $off的使用详解

1.$refs的使用场景父组件调用子组件的方法,可以传递数据。父组件:点击父组件import ChildA from './child.vue'export default{components:{ChildA},data(){return {msg:'我是父组件的数据'}},methods:{getMyEvent(){//调用子组件的方法,child是上边ref起的名字,emitEvent是子组...

weixin_39903846的博客 756

Vue父子组件传值之——访问根组件$root、$parent、$children和$refs

Vue组件传值除了prop和$emit,我们还可以直接获取组件对象: 根组件: $root // 单一对象 表示当前组件树的根 Vue 实例,即new Vue({...根组件内容})。如果当前实例没有父实例,此实例将会是其自己。Vue子组件可以通过$root属性访问父组件实例的属性和方法 父组件:$parent // 单一对象 $parent表示父组件的实例,该属性只读 子组件:$c...

weixin_30613433的博客 1279
上一篇: ES6-WeakMap与Map的区别,Set与WeakSet的区别
下一篇: 什么是依赖注入,vue的依赖注入如何实现的
devincob
博客等级 码龄10年 72粉丝 126原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值