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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
JavaScript中递归实现的方法及其区别
Sep 12 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
Dec 06 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 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原生模板引擎 最简单的模板引擎
2012/04/25 PHP
在windows平台上构建自己的PHP实现方法(仅适用于php5.2)
2013/07/05 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP registerXPathNamespace()函数讲解
2019/02/03 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
Node.js实现文件上传
2016/07/05 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
微信小程序 图片宽高自适应详解
2017/05/11 Javascript
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
pygame播放音乐的方法
2015/05/19 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
python获取酷狗音乐top500的下载地址 MP3格式
2018/04/17 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
python中@contextmanager实例用法
2021/02/07 Python
中专自我鉴定范文
2013/10/16 职场文书
高中班长自我鉴定
2013/12/20 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
技术股份合作协议书
2014/10/05 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android