Vue $emit $refs子父组件间方法的调用实例


Posted in Javascript onSeptember 12, 2018

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>

以上这篇Vue $emit $refs子父组件间方法的调用实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
Mar 17 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
RequireJS 依赖关系的实例(推荐)
Jan 21 Javascript
二维码图片生成器QRCode.js简单介绍
Aug 18 Javascript
vue跨域解决方法
Oct 15 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
Mar 06 Javascript
Vue源码分析之Vue实例初始化详解
Aug 25 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 #Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 #Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 #Javascript
vue elementUI tree树形控件获取父节点ID的实例
Sep 12 #Javascript
Vue.js 十五分钟入门图文教程
Sep 12 #Javascript
Vue通过ref父子组件拿值方法
Sep 12 #Javascript
webpack4 升级迁移的实现
Sep 12 #Javascript
You might like
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
实例讲解php数据访问
2016/05/09 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
在Docker快速部署Node.js应用的详细步骤
2016/09/02 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
[01:23]2014DOTA2国际邀请赛 球迷无处不在Ti现场世界杯受关注
2014/07/10 DOTA
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
Python 装饰器@,对函数进行功能扩展操作示例【开闭原则】
2019/10/17 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
土木工程专业自荐信
2013/10/04 职场文书
卫校护理专业毕业生求职信
2013/11/26 职场文书
服务承诺口号
2014/05/22 职场文书
质量负责人任命书
2014/06/06 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers