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 相关文章推荐
jQuery实现表头固定效果的实例代码
May 24 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
require.js深入了解 require.js特性介绍
Sep 04 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
node中短信api实现验证码登录的示例代码
Jan 20 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无限极分类函数的实现方法详解
2017/04/15 PHP
深入浅析安装PhpStorm并激活的步骤详解
2020/09/17 PHP
javascript 写类方式之一
2009/07/05 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
推荐10个超棒的jQuery工具提示插件
2011/10/11 Javascript
判断滚动条到底部的JS代码
2013/11/04 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
nodejs中express入门和基础知识点学习
2018/09/13 NodeJs
electron实现静默打印的示例代码
2019/08/12 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[02:55]DOTA2英雄基础教程 发条技师
2013/12/04 DOTA
Python Web框架Pylons中使用MongoDB的例子
2013/12/03 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Scrapy爬虫实例讲解_校花网
2017/10/23 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python语言检测模块langid和langdetect的使用实例
2019/02/19 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
如何修复使用 Python ORM 工具 SQLAlchemy 时的常见陷阱
2019/11/19 Python
Python解析json代码实例解析
2019/11/25 Python
公司财务流程之主管工作流程
2014/03/03 职场文书
电子商务专业求职信
2014/07/10 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015教师个人德育工作总结
2015/07/22 职场文书
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
Python实现科学占卜 让视频自动打码
2022/04/09 Python