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 相关文章推荐
[原创]后缀就扩展名为js的文件是什么文件
Dec 06 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
AngularJS 表达式详解及实例代码
Sep 14 Javascript
微信小程序 Record API详解及实例代码
Sep 30 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
vue-router实现编程式导航的代码实例
Jan 19 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/06/14 PHP
PHP版自动生成文章摘要
2008/07/23 PHP
PHP创建桌面快捷方式的实例代码
2014/02/17 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
仿校内登陆框,精美,给那些很厉害但是没有设计天才的程序员
2008/11/24 Javascript
28个JS验证函数收集
2010/03/02 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
收集的10个免费的jQuery相册
2011/02/26 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
js实现鼠标滑过文字链接色彩变化的效果
2015/05/06 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python实现在线音乐播放器
2017/03/03 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Django CSRF跨站请求伪造防护过程解析
2019/07/31 Python
用Python解数独的方法示例
2019/10/24 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
双十佳事迹材料
2014/01/29 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
会计人员岗位职责
2014/03/19 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python