vue中'$refs'、'$emit'、'$on'的使用场景
时间:2019-11-06
本文章向大家介绍vue中'$refs'、'$emit'、'$on'的使用场景,主要包括vue中'$refs'、'$emit'、'$on'的使用场景使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、$emit的使用场景
子组件调用父组件的方法并传递数据
注意:子组件标签中的时间也不区分大小写要用“-”隔开
子组件:
<template> <button @click="emitEvent">点击我</button> </template> <script> export default { data() { return { msg: "我是子组件中的数据" } }, methods: { emitEvent(){ this.$emit('my-event', this.msg) //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。 } } } </script>
父组件:
<template> <div id="app"> <child-a @my-event="getMyEvent"></child-a> <!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值--> </div> </template> <script> import ChildA from './components/child.vue' export default { components: { ChildA }, methods: { getMyEvent(msg){ console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据 } } } </script>
2、$refs的使用场景
父组件调用子组件的方法,可以传递数据
注意:子组件标签中的时间也不区分大小写要用“-”隔开
父组件:
<template> <div id="app"> <child-a ref="child"></child-a> <!--用ref给子组件起个名字--> <button @click="getMyEvent">点击父组件</button> </div> </template> <script> import ChildA from './components/child.vue' export default { components: { ChildA }, data() { return { msg: "我是父组件中的数据" } }, methods: { getMyEvent(){ this.$refs.child.emitEvent(this.msg); //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。 } } } </script>
子组件:
<template> <button>点击我</button> </template> <script> export default { methods: { emitEvent(msg){ console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据 } } } </script>
3、$on的使用场景
兄弟组件之间相互传递数据
- 首先创建一个vue的空白实例(兄弟间的桥梁)
import Vue from 'vue' export default new Vue()
- 子组件 childa
- 发送方使用 $emit 自定义事件把数据带过去
<template> <div> <span>A组件->{{msg}}</span> <input type="button" value="把a组件数据传给b" @click ="send"> </div> </template> <script> import vmson from "../../../util/emptyVue" export default { data(){ return { msg:{ a:'111', b:'222' } } }, methods:{ send:function(){ vmson.$emit("aevent",this.msg) } } } </script>
- 父组件:
<template> <div> <childa></childa> <br /> <childb></childb> </div> </template> <script> import childa from './childa.vue'; import childb from './childb.vue'; export default { components:{ childa, childb }, data(){ return { msg:"" } }, methods:{ } } </script>
————————————————
版权声明:本文为CSDN博主「骚φ(゜▽゜*)♪白」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/chaochao466/article/details/82884966
原文地址:https://www.cnblogs.com/ryelqy/p/11804188.html
- 在 .Net 设定 proxy 的方法
- MVC结构简介
- 优酷、爱奇艺、摩拜……多家网络平台被曝注册容易注销难!面临个人隐私泄露风险
- WordPress中借助.htaccess屏蔽某个IP或某个IP段(防垃圾评论)
- ASP.NET 调味品:AJAX
- CTreeCtrl 控件使用总结
- 高盛成立交易部门,涉足比特币和加密货币交易
- WordPress主题开发:添加主题更新提醒功能
- WordPress主题开发:添加主题更新提醒功能
- ASP.NET2.0应用中定制安全凭证之实践篇
- Kaggle大神带你上榜单Top2%:点击预测大赛纪实(下)
- WordPress主题后台选项开发框架 Options Framework 介绍
- vc++ 在程序中运行另一个程序的方法
- 为Options Framework主题后台框架添加后台侧边栏
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Ruby 和 Java 的基础语法比较
- 聊聊面试-NoClassDefFoundError 和 ClassNotFoundException 区别
- 聊聊面试-int和Integer的区别
- 记一次Linux修改MySQL配置不生效的问题
- VBA解析复合文档03——解析扇区链表
- C++核心准则E.17:不要试图在所有函数中捕捉所有异常
- 《图解算法》第1章 算法简介
- 自动化篇 | 这些自动化场景,批处理脚本完全可以取代 Python!
- 《RabbitMQ》如何保证消息不被重复消费
- 算法篇:树之翻转树
- 每日一题 | 约瑟夫问题
- 编码的浪漫:完美序列化的官方评测
- 【Vulnhub】symfonos2
- PWN入门(unsafe unlink)
- tf_cnn_benchmark 显存问题