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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
js闭包实例汇总
Nov 09 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
AngularJS入门之动画
Jul 27 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
Angular5整合富文本编辑器TinyMCE的方法(汉化+上传)
May 26 Javascript
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
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
JS验证身份证有效性示例
2013/10/11 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
Javascript随机标签云代码实例
2016/06/21 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
关于Layui Table隐藏列问题
2019/09/16 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[02:56]DOTA2矮人直升机 英雄基础教程
2013/11/26 DOTA
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
Python实现自定义读写分离代码实例
2019/11/16 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
美德好少年事迹材料
2014/01/19 职场文书
会计岗位说明书
2014/07/29 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
青岛导游词
2015/02/12 职场文书
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
python pygame 开发五子棋双人对弈
2022/05/02 Python
Go web入门Go pongo2模板引擎
2022/05/20 Golang