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 相关文章推荐
用js实现层随着内容大小动态渐变改变 推荐
Dec 19 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jQuery实现Tab选项卡切换效果简单演示
Nov 23 Javascript
Bootstrap Search Suggest使用例子
Dec 21 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
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创建多级目录的方法
2015/03/24 PHP
PHP接收json 并将接收数据插入数据库的实现代码
2015/12/01 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
解读JavaScript代码 var ie = !-[1,] 最短的IE判定代码
2011/05/28 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
2017/06/26 Javascript
微信小程序 蓝牙的实现实例代码
2017/06/27 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
animate.css在vue项目中的使用教程
2018/08/05 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
详解使用JWT实现单点登录(完全跨域方案)
2019/08/02 Javascript
[01:43]深扒TI7聊天轮盘语音出处4
2017/05/11 DOTA
利用selenium 3.7和python3添加cookie模拟登陆的实现
2017/11/20 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
详解Python sys.argv使用方法
2019/05/10 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
浅析Python面向对象编程
2020/07/10 Python
马来西亚时装购物网站:ZALORA马来西亚
2017/03/14 全球购物
美国最大的半成品净菜电商:Blue Apron(蓝围裙)
2018/04/27 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
广告学专业毕业生自荐信
2013/09/24 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
媒矿安全生产承诺书
2014/05/23 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2014年资料员工作总结
2014/11/18 职场文书
医院党建工作总结2015
2015/05/26 职场文书
党员转正党支部意见
2015/06/02 职场文书
结婚仪式主持词
2015/06/29 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript