vue组件父子间通信02
三、组件间通信（$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>
vue组件父子间通信02的更多相关文章
- vue组件父子间通信之综合练习--假的聊天室
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue组件父子间通信01
子组件传递数据 用户已经登录 父组件接收数据 并显示列表,未登录不显示列表 /* 有两个组件,分别是main-component,header-component.main-component是由he ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- vuex-- Vue.的中心化状态管理方案（vue 组件之间的通信简化机制）
vuex-- Vue.的中心化状态管理方案(vue 组件之间的通信简化机制) 如果你在使用 vue.js , 那么我想你可能会对 vue 组件之间的通信感到崩溃 .vuex就是为了解决组件通信问题的. ...
- vue组件之间的通信， 父子组件通信，兄弟组件通信
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...
- vue组件之间的通信，父子之间的数据通信
父子组件之间的通信问题既可以传递数据也可以传递变量,父组件传递数据给子组件可以使用props,子组件传递数据给父组件则可以自定义函数来监听子组件的事件发射器. 首先说说组件注册,组件的注册分为全局注册 ...
- vue父子间通信案列三($emit和prop用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父子间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue组件之间的通信
1.父组件给子组件传递数据 <body> <div id="app"> 父组件:{{total}} <br> <son-component ...
随机推荐
- css发展过程
https://www.cnblogs.com/dashnowords/p/9460722.html
- ELK报错及解决方案
ELK报错及解决方案 1.jdk版本问题 报错如下: future versions of Elasticsearch will require Java 11; your Java version ...
- mysql:联合索引及优化
命名规则:表名_字段名1.需要加索引的字段,要在where条件中2.数据量少的字段不需要加索引3.如果where条件中是OR关系,加索引不起作用4.符合最左原则 尽量不要用or,如果可以用union代 ...
- Python---常用的内置模块
#fsum() 对整个序列求和 返回浮点数 print(math.fsum([1,4.5,5,7])) #sum() python内置求和 print(sum([1,4,5,7])) print( ...
- 利用BeautifulSoup爬去我爱我家的租房数据
因为之前对BeautifulSoup一直不是很熟悉,刚好身边的朋友同事在找房子,就想着能不能自己写个爬虫爬一下数据,因此就写了这个爬虫.基本都是边看书边写的,不过也没什么好讲的.直接粘代码了. # c ...
- HDU 6205 card card card ( 思维 )
题意 : 给定两个序列 a 和 b ,保证 a 数列的和 == b数列的和,从头到尾考虑 (a[i] - b[i]) 的前缀和,直到前缀和为负数则无法进行下去,所得的便是a[1~i]的和,现在有一个操 ...
- 题解 P1433 【吃奶酪】
这道题是一道著名的NP问题. 正解应该是DP,但我在这里讲一种近似算法--爬山. 希望某些dalao注意一下爬山与模拟退火的区别. 爬山是直往低处往高处爬,每次取大的,也就是一种贪心思想. 而模拟退火 ...
- hdu_1231（最大连续子序列）
http://acm.hdu.edu.cn/showproblem.php?pid=1231 最长公共子序列: 方法1:暴力枚举所有区间的连续和,维护最大和 复杂度O(n^3)-->因为求区间和 ...
- 给网页头部标题加logo
现在在写公司的官网,需要在网页的头部加logo,没有加的时候是这样的 那么,现在只要一步,就可以了,加上一行代码 <link rel="icon" href="图标 ...
- SQL字串截取函数编写及应用
SQL里面一种用来截取字符串的方法,用的是表函数实现字符串截取并应用的SQL操作语句中. .截取字符串表函数 ALTER FUNCTION [dbo].[SplitToTable] ( -- Add ...