详解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 prototype对象的属性说明
Mar 13 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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读取30天之内的根据算法排序的代码
2008/04/06 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
thinkphp分页集成实例
2017/07/24 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
json对象及数组键值的深度大小写转换问题详解
2018/03/30 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python备份Mysql脚本
2008/08/11 Python
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
python机器人运动范围问题的解答
2019/04/29 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
DjangoWeb使用Datatable进行后端分页的实现
2020/05/18 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
基于HTML5+tracking.js实现刷脸支付功能
2020/04/16 HTML / CSS
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
安全生产活动月方案
2014/03/09 职场文书
抽样调查项目计划书
2014/04/24 职场文书
大型会议策划方案
2014/05/17 职场文书
教师师德考核自我评价
2014/09/13 职场文书
2014年接待工作总结
2014/11/26 职场文书
2015年事业单位办公室文员工作总结
2015/04/24 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python