vue父组件点击触发子组件事件的实例讲解


Posted in Javascript onFebruary 08, 2018

最近在学习Vue父子组件通信的问题,刚好遇到一个父子之间事件事件派发与接收,在这里记录一下,在这里我使用的是ref

给子组件注册引用信息。官网是这样解释的

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素; 如果用在子组件上,引用就指向组件实例:

父组件app.vue

<template>
  <div id="app">
  <!--父组件-->
  <input v-model="msg">
  <button v-on:click="notify">广播事件</button>
  <!--子组件-->
  <popup ref="child" ></popup>
  </div>
 </template>
 <script>
  import popup from '@/components/popup'
  export default {
  name: 'app',
  data: function () {
   return {
   msg: ''
   }
  },
  components: {
   popup
  },
  methods: {
   notify: function () {
   if (this.msg.trim()) {
    this.$refs.child.parentMsg(this.msg)
   }
   }
  }
  }
 </script>
 <style>
  #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  }
 </style>

子组件popup.vue

<template>
   <div>
   <ul>
    <li v-for="item in messages">父组件输入了:{{item}}</li>
   </ul>
   </div>
  </template>
  <style>
   body {
    background-color: #ffffff;
   }
  </style>
  <script>
  export default{
   name: 'popup',
   data: function () {
   return {
    messages: []
   }
   },
   methods: {
   parentMsg: function (msg) {
    this.messages.push(msg)
   }
   }
  }
  </script>

我把这个实例分为几个步骤解读:

1、父组件的button元素绑定click事件,该事件指向notify方法

2、给子组件注册一个ref="child"

3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg

4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中

运行结果如下:

vue父组件点击触发子组件事件的实例讲解

vue父组件点击触发子组件事件的实例讲解

以上这篇vue父组件点击触发子组件事件的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
js函数调用的方式
May 06 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
微信小程序-获得用户输入内容
Feb 13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 Javascript
Vue路由守卫及页面登录权限控制的设置方法(两种)
Mar 31 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
vue中实现在外部调用methods的方法(推荐)
Feb 08 #Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 #Javascript
Vue组件通信的四种方式汇总
Feb 08 #Javascript
Vue Socket.io源码解读
Feb 07 #Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 #Javascript
Express下采用bcryptjs进行密码加密的方法
Feb 07 #Javascript
Vue Element使用icon图标教程详解(第三方)
Feb 07 #Javascript
You might like
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
PHP模糊查询的实现方法(推荐)
2016/09/06 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
canvas实现简易的圆环进度条效果
2017/02/28 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
详解Js里的for…in和for…of的用法
2019/03/28 Javascript
微信小程序实现授权登录
2019/05/15 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
Python 机器学习库 NumPy入门教程
2018/04/19 Python
Python对excel文档的操作方法详解
2018/12/10 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
乌克兰在线药房:Аптека24
2019/10/30 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
物流司机岗位职责
2013/12/28 职场文书
医药个人求职信范文
2014/01/29 职场文书
党员公开承诺书范文
2014/03/25 职场文书
小班下学期个人总结
2015/02/12 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
搬迁通知
2015/04/20 职场文书
写给老师的保证书
2015/05/09 职场文书
幼儿园安全管理制度
2015/08/05 职场文书
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP