vue组件父子间通信详解(三)


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了vue组件父子间通信的具体代码,供大家参考,具体内容如下

三、组件间通信($parent $refs)

父组件要想获取子组件的数据:

①在调用子组件的时候,指定ref属性

<child-component ref="mySon"></child-component>

②根据指定的引用的名字 找到子组件的实例对象

this.$refs.mySon

子组件要想获取父组件的数据:

①直接读取
this.$parent
通过this.$refs拿到子组件的数据

代码:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信-01</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </div>
  <script>
  //vue提供的ref
    Vue.component("dahua",{
      data:function(){
        return{
          mySonName:""
        }
      },
      methods:{
      //通过$refs拿到指定的所引用的对应的组件的实例对象
        getSonName:function(){
          this.mySonName = this.$refs.mySon.name;
        }
      },
      template:`
        <div>
          <h1>这是父组件</h1>
          <button @click = "getSonName">获取子组件数据</button>
          <span>{{mySonName}}</span>
          <hr>
          <xiaohua ref="mySon"></xiaohua>
        </div>
      `
    })
//  创建子组件
    Vue.component("xiaohua",{
      data:function(){
        return{
          name:"小花"
        }
      },
      template:`
          <h1>这是子组件</h1>
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

子组件通过$parent获取父组件的数据

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>组件间通信-02</title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <dahua></dahua>
  </div>
  <script>
    //创建子组件
    Vue.component("dahua",{
      data:function(){
        return{
          myName:"大花"
        }
      },
      template:`
        <div>
          <h1>这是父组件</h1>
          <hr>
          <xiaohua></xiaohua>
        </div>
      `
    })
    //创建子组件
    Vue.component("xiaohua",{
      data:function(){
        return{
          msg:""
        }
      },
      template:`
        <div>
            <h1>这是子组件</h1>
            <p>{{msg}}</p>
        </div>
      `,
      created:function(){
        //在子组件创建完成时获取父组件的数据
        //保存在msg中在p标签中显示
          this.msg = this.$parent.myName;
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
Nov 14 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
基于jQuery解决ios10以上版本缩放问题
Nov 03 jQuery
微信小程序定位当前城市的方法
Jul 19 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 #Javascript
微信小程序上传图片到服务器实例代码
Nov 07 #Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 #Javascript
vue组件间通信子与父详解(二)
Nov 07 #Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 #Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 #Javascript
vue组件父与子通信详解(一)
Nov 07 #Javascript
You might like
php实现设计模式中的单例模式详解
2014/10/11 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
d3.js中冷门却实用的内置函数总结
2017/02/04 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Django 限制访问频率的思路详解
2019/12/24 Python
解决python3插入mysql时内容带有引号的问题
2020/03/02 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
H&M美国官网:欧洲最大的服饰零售商
2016/09/07 全球购物
Banana Republic英国官网:香蕉共和国,GAP集团旗下偏贵族风
2018/04/24 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
数学专业推荐信范文
2013/11/21 职场文书
人事专员的职责
2014/02/26 职场文书
警校毕业生自我评价
2014/04/06 职场文书
IT工程师岗位职责
2014/07/04 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
2015中学教学工作总结
2015/07/22 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书
门面租赁合同范文
2019/08/06 职场文书