Vue子组件向父组件通信与父组件调用子组件中的方法


Posted in Javascript onJune 22, 2018

子组件向父组件通信

子组件的button按钮绑定点击事件,事件方法名为sendToParent(),

该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg);

在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e),

而msg已经在data中声明,其值为”子级消息”,故最终的输出结果为: 展示父级接收到的消息:子级消息

父组件调用子组件中的方法

点击父组件的button按钮,触发了click事件指向的useChild方法[该方法的行为是输出”父级消息”],

useChild方法在父组件的中的methods中声明,调用子组件中的方法,并传入参数str,即this.$refs.child1.getMsg(str);

而getMsg方法已经在子组件的methods中声明,其行为是console.log('子级组件收到父级的内容',str);,

所以,最终的输出结果为: 子级组件收到父级的内容 父级消息

代码示例(结合上面的分析理解代码)

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>子向父通信</title> 
  <style> 
    #app { 
      border: 1px solid blue; 
      width: 500px; 
      padding: 20px; 
      margin: auto; 
      border-radius: 8px; 
      background: fuchsia; 
    } 
    #wrapper { 
      border: 1px solid red; 
      width: 400px; 
      padding: 20px; 
      border-radius: 8px; 
      background: yellowgreen; 
      margin-top: 20px; 
    } 
  </style> 
  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 
</head> 
<body> 
  <div id="app"> 
    <!-- 父组件 --> 
    <h1>这是父组件</h1> 
    <p>展示父级接收到的消息:{{msg}}</p> 
    <button @click="useChild(szStr)">调用子组件的方法</button> 
     <!-- cus-event为子组件自定义的事件名; doAction($event)为父组件的事件,参数$event不可少也不可写成其他--> 
    <!-- ref表示组件的别名 --> 
    <child @cus-event="doAction($event)" ref="child1"></child> 
  </div> 
</body> 
</html> 
<template id="child"> 
  <div id="wrapper"> 
    <!-- 子组件 --> 
    <h2>这是子组件</h2> 
    <button @click="sendToParent">向父组件发消息</button> 
  </div> 
</template> 
<script> 
  let child = { 
    template: '#child', 
    data() { 
      return { 
        msg: '子级消息' 
      }; 
    }, 
    methods: { 
      sendToParent() { 
        // 子组件只管发送消息,其中cus-event为自定义事件名(事件名不能写成驼峰法,多个单词用-连接),this.msg为要传递的参数。 
        this.$emit('cus-event', this.msg); 
      }, 
      getMsg(str) { 
        console.log('子级组件收到父级的内容', str); 
      } 
    } 
  }; 
  // 注意: .$mount('#app')跟实例内部el: '#app'是等价的 
  new Vue({ 
    data: { 
      msg: '', 
      szStr:'父级消息' 
    }, 
    components: { 
      child 
    }, 
    methods: { 
      doAction(e) { 
        console.log(this); 
        console.log(e); 
        this.msg = e; 
      }, 
      useChild(str) { 
        // 调用子组件的方法 
        // console.log(this); 
        // console.log(this.$refs); 
        // this.$refs.child1得到的子组件实例 
        this.$refs.child1.getMsg(str); 
      } 
    } 
  }).$mount('#app'); 
</script>

效果图

Vue子组件向父组件通信与父组件调用子组件中的方法

总结

以上所述是小编给大家介绍的Vue子组件向父组件通信与父组件调用子组件中的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
从sohu弄下来的flash中展示图片的代码
Apr 27 Javascript
判断某个字符在一个字符串中是否存在的js代码
Feb 28 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jQuery中用dom操作替代正则表达式
Dec 29 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
Sep 10 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 Javascript
Vue2.0实现简单分页及跳转效果
Jul 29 Javascript
在Vue 中实现循环渲染多个相同echarts图表
Jul 20 Javascript
(开源)微信小程序+mqtt,esp8266温湿度读取
Apr 02 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 #Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 #Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
vue中实现左右联动的效果
Jun 22 #Javascript
JS实现关键词高亮显示正则匹配
Jun 22 #Javascript
JS获取指定月份的天数两种实现方法
Jun 22 #Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 #Javascript
You might like
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
如何修改和添加Apache的默认站点目录
2013/07/05 PHP
php ImageMagick windows下安装教程
2015/01/26 PHP
php单例模式的简单实现方法
2016/06/10 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
浅谈jquery拼接字符串效率比较高的方法
2017/02/22 Javascript
详解Angular路由 ng-route和ui-router的区别
2017/05/22 Javascript
JavaScript使用Ajax上传文件的示例代码
2017/08/10 Javascript
Vue-Cli中自定义过滤器的实现代码
2017/08/12 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JS操作json对象key、value的常用方法分析
2019/10/29 Javascript
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
代码讲解Python对Windows服务进行监控
2018/02/11 Python
Python基于scipy实现信号滤波功能
2019/05/08 Python
Django获取应用下的所有models的例子
2019/08/30 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
css3弹性盒子flex实现三栏布局的实现
2020/11/12 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
2016/03/21 HTML / CSS
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
国际礼品店:GiftsnIdeas
2018/05/03 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
Bandier官网:奢侈、时尚前卫的健身服装首选目的地
2020/07/05 全球购物
店长岗位职责
2013/11/21 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
影子教师研修方案
2014/06/14 职场文书
人身损害赔偿协议书
2016/03/22 职场文书
python开发实时可视化仪表盘的示例
2021/05/07 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技