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实现状态限定编辑的代码
Feb 11 Javascript
JavaScript中“+”的陷阱深刻理解
Dec 04 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
node.js学习总结之调式代码的方法
Jun 25 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
javascript简易画板开发
Apr 12 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
js 动态校验开始结束时间的实现代码
May 25 Javascript
vue常用高阶函数及综合实例
Feb 25 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
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jQuery取得select选择的文本与值的示例
2013/12/09 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
如何改进javascript代码的性能
2015/04/02 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
canvas+gif.js打造自己的数字雨头像的示例代码
2017/10/26 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
2017/12/15 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
vue mounted组件的使用
2018/06/18 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
[10:42]Team Liquid Vs Newbee
2018/06/07 DOTA
Python学习笔记之常用函数及说明
2014/05/23 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Pytorch之finetune使用详解
2020/01/18 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python基于unittest实现测试用例执行
2020/11/25 Python
环保小标语
2014/06/13 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
中学生学习保证书
2015/02/26 职场文书
红楼梦读书笔记
2015/06/25 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript