详解vue中在父组件点击按钮触发子组件的事件


Posted in Javascript onNovember 13, 2020

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

1、父组件的button元素绑定click事件,该事件指向notify方法
2、给子组件注册一个ref=“child”
3、父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg
 4、子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中

父组件

<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>

子组件

<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>

到此这篇关于详解vue中在父组件点击按钮触发子组件的事件的文章就介绍到这了,更多相关vue 父组件触发子组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个javascript参数的小问题
Mar 02 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
神奇的7个jQuery 3D插件整理
Jan 06 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
JavaScript数据结构之二叉查找树的定义与表示方法
Apr 12 Javascript
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
Vuex提升学习篇
Jan 11 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
Vue中nprogress页面加载进度条的方法实现
Nov 13 #Javascript
解决vue打包 npm run build-test突然不动了的问题
Nov 13 #Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 #Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
You might like
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
document.createElement()用法
2013/03/13 Javascript
JavaScript实现QueryString获取GET参数的方法
2013/07/02 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
浅谈js的异步执行
2016/10/18 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
VUE实现强制渲染,强制更新
2019/10/29 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
2020/07/22 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python调用命令行进度条的方法
2015/05/05 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
python修改FTP服务器上的文件名
2019/09/11 Python
深入分析python 排序
2020/08/24 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
大学社团招新的通讯稿
2014/09/10 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
党员“四风”方面存在问题及整改措施
2014/09/24 职场文书
党员评议个人总结
2014/10/20 职场文书
社保缴纳证明申请书
2014/11/03 职场文书
毕业论文致谢信
2015/05/14 职场文书
廉政党课工作报告案例
2019/06/21 职场文书