vue组件父子间通信详解(三)
时间:2019-04-08
本文章向大家介绍vue组件父子间通信详解(三),主要包括vue组件父子间通信详解(三)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- mybatis文件映射之自定义返回结果集
- maven之第一个maven程序
- 【LeetCode】重建二叉树day04
- 【LeetCode】从尾到头反过来返回每个节点的值(用数组返回)day03
- mybatis文件映射之利用association进行关联查询(二)
- 【JUC】CountDownLatch你真的了解吗?
- mybatis动态sql之foreach补充(一)
- 【LeetCode】把字符串 s 中的每个空格替换成““%20””day02
- bert加载数据代码
- python爬虫--看看虎牙女主播中谁颜值最高
- 基于maven+ssm的增删改查之maven环境的搭建
- (22)Bash环境变量
- maven之在eclipse中创建maven项目
- wiki百科之将词转换为索引表示
- 【LeetCode】找出数组中重复的数字day01