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 查找select ,并触发事件的实现代码
Mar 30 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
ExtJS如何设置与获取radio控件的选取状态
Jan 22 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
JS实现Fisheye效果动感放大菜单代码
Oct 21 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
three.js实现圆柱体
Dec 30 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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 字符串操作入门教程
2006/12/06 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
深入浅析JavaScript中with语句的理解
2016/05/12 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
JavaScrip数组删除特定元素的几种方法总结
2017/09/06 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
python爬虫之urllib3的使用示例
2018/07/09 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
基于python 取余问题(%)详解
2020/06/03 Python
利用python进行文件操作
2020/12/04 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
The Hut美国/加拿大:英国领先的豪华在线百货商店
2019/03/26 全球购物
毕业生如何写自我鉴定
2014/03/15 职场文书
信电学院毕业生自荐书
2014/05/24 职场文书
医学专业大学生求职信
2014/07/12 职场文书
资金申请报告范文
2015/05/14 职场文书
党纪处分决定书
2015/06/24 职场文书
新课程改革心得体会
2016/01/22 职场文书