详解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之HTMLCollection接口代码
Apr 27 Javascript
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
用jQuery模拟select下拉框的简单示例代码
Jan 26 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
借助云开发实现小程序短信验证码的发送
Jan 06 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
React中的Context应用场景分析
Jun 11 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
使用 MySQL Date/Time 类型
2008/03/26 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
2017/06/29 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
Python聊天室程序(基础版)
2018/04/01 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
What is view? why do we have view?
2012/06/22 面试题
新学期家长寄语
2014/01/19 职场文书
优秀经理事迹材料
2014/02/01 职场文书
医院搬迁方案
2014/06/14 职场文书
十佳青年事迹材料
2014/08/21 职场文书
超市创业计划书
2014/09/15 职场文书
2014年优质护理服务工作总结
2014/11/14 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
民主生活会主持词
2015/07/01 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
宪法宣传标语100条
2019/10/15 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL
利用Python第三方库实现预测NBA比赛结果
2021/06/21 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python