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获取文本框中字符长度的代码
Sep 29 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JS实现表格数据各种搜索功能的方法
Mar 03 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
开启BootStrap学习之旅
May 04 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JS实现标签页切换效果
May 04 Javascript
H5上传本地图片并预览功能
May 08 Javascript
ES6模块化的import和export用法方法总结
Aug 08 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
Vue+Express实现登录状态权限验证的示例代码
May 05 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php流量统计功能的实现代码
2012/09/29 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
JS实现仿百度文库评分功能
2017/01/12 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
JS实现简单日历特效
2020/01/03 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
2020/04/04 jQuery
Python实现视频下载功能
2017/03/14 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
Pandas DataFrame 取一行数据会得到Series的方法
2018/11/10 Python
Python中base64与xml取值结合问题
2019/12/22 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
面试后的英文感谢信
2014/02/01 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
党员服务承诺书
2014/05/28 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
投标单位介绍信
2015/05/05 职场文书
CAD实训总结范文
2015/08/03 职场文书