vue父子组件间引用之$parent、$children


Posted in Javascript onMay 20, 2020

vue中提到【父子组件】,则一定会想到我们常用的父子组件通信:props+$on()$emit() ,如图:

vue父子组件间引用之$parent、$children

也就是说,虽然在一般情况下,子组件是不能引用父组件或者Vue实例的数据,但是对于在开发中出现的“数据需要在组件中来回传递”,我们最简单的解决办法就是通过props(和v-on)将数据从父组件传到子组件,再用$emit将数据从子组件传到父组件,以此循环引用。

但是在另一些场景下,我们可能想要比如(在父组件中)拿到子组件对象,然后直接操作其中数据,去实现一些功能,比如方法的调用。

vue父子组件间引用之$parent、$children

有时候我们需要父组件直接访问子组件、子组件直接访问父组件,或者子组件访问根组件:

  • 父组件访问子组件:使用$children$refs reference
  • 子组件访问父组件:使用$parent

父子组件的访问方式之:$children

children很特别,查阅资料可以发现:this.$children是一个数组类型,它包含了所有子组件对象:

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc></mxc>
			<button @click="btnClick">颤抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子组件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$children)
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

点击(父组件)按钮之后:

vue父子组件间引用之$parent、$children

我们还可以通过循环拿到所有子组件数据:

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc></mxc>
			<button @click="btnClick">颤抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子组件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$children)
						for(let c of this.$children){
							console.log(c.name)
						}
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是子组件的name'
							}
						},
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

点击(父组件)按钮之后:

vue父子组件间引用之$parent、$children

因为是数组,所以我们可以通过比如:this.$children[2]来拿到第三个子组件的数据。
但是这么做有一个问题:比如开发时突然在这三个子组件中又插入了一个子组件(可能相同,也可能不同),这时候【2】就不再是我们需要的了。。。

所以我们可以用vue-DOM之光$refs

<body>
		<div id="app">
			<mxc></mxc>
			<mxc></mxc>
			<mxc ref="aaa"></mxc>
			<button @click="btnClick">颤抖吧</button>
		</div>
		<template id="mxc">
			<div>我是子组件啊</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				methods:{
					btnClick(){
						console.log(this.$refs)
						console.log(this.$refs.aaa)
					}
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是子组件的name'
							}
						},
						methods:{
							showMessage(){
								console.log('mxcnb')
							}
						}
					}
				}
			})
		</script>
	</body>

点击(父组件)按钮之后:

vue父子组件间引用之$parent、$children

为什么叫“DOM之光”呢?因为它和原生JS中的document.querySelector('xxx')功能一样,它可以在vue中获取元素/匹配组件

子访问父:$parent

<body>
		<div id="app">
			<mxc></mxc>
		</div>
		<template id="mxc">
			<div>我是子组件啊</div>
			<button @click="btnClick">更加颤抖的child</button>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				components:{
					mxc:{
						template:'#mxc',
						methods:{
							btnClick(){
								console.log(this.$parent)
							}
						}
					}
				}
			})
		</script>
	</body>

如法炮制:

vue父子组件间引用之$parent、$children

图中el属性在有些浏览器(或添加了vue插件)会显示未Vue?
因为当前子组件的父组件就是vue实例啊!

(但是在实际中$parent用的非常少——考虑到耦合度的原因)

子组件访问根组件:$root

<body>
		<div id="app">
			<mxc></mxc>
		</div>
		<template id="mxc">
			<div>
				<div>我是mxc组件</div>
				<cdn></cdn>
			</div>
		</template>
		<template id="mxca">
			<div>
				<div>我是子子组件啊</div>
				<button @click="btnClick">巨颤祖child</button>
			</div>
		</template>
		
		<script>
			const app=new Vue({
				el:'#app',
				data:{
					message:'你好'
				},
				components:{
					mxc:{
						template:'#mxc',
						data(){
							return{
								name:'我是中间子组件的name'
							}
						},
						components:{
							cdn:{
								template:'#mxca',
								methods:{
									btnClick(){
										console.log(this.$parent.name)
										console.log(this.$root.message)
									}
								}
							}
						}
					}
				}
			})
		</script>
	</body>

vue父子组件间引用之$parent、$children

总结

到此这篇关于vue父子组件间引用:$parent、$children的文章就介绍到这了,更多相关vue父子组件间引用:$parent、$children内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS 显示当前日期与时间的代码
Mar 24 Javascript
读jQuery之三(构建选择器)
Jun 11 Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
javascript异步编程的4种方法
Feb 19 Javascript
JS弹出可拖拽可关闭的div层完整实例
Feb 13 Javascript
js实现简单的联动菜单效果
Aug 19 Javascript
JavaScript创建对象的方式小结(4种方式)
Dec 17 Javascript
JavaScript+html5 canvas绘制的小人效果
Jan 27 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
Jul 08 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 #jQuery
微信小程序国际化探索实现(附源码地址)
May 20 #Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 #jQuery
jquery html添加元素/删除元素操作实例详解
May 20 #jQuery
jQuery HTML css()方法与css类实例详解
May 20 #jQuery
15分钟上手vue3.0(小结)
May 20 #Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 #jQuery
You might like
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js的toUpperCase方法用法实例
2015/01/27 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
TypeScript入门-接口
2017/03/30 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
详解Windows下安装Nodejs步骤
2017/05/18 NodeJs
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
js实现弹窗猜数字游戏
2020/11/26 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
python实现每次处理一个字符的三种方法
2014/10/09 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
Python中一般处理中文的几种方法
2019/03/06 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
删除pycharm鼠标右键快捷键打开项目的操作
2021/01/16 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
成品仓管员岗位职责
2013/12/11 职场文书
校庆筹备方案
2014/03/30 职场文书
求职信怎么写
2014/05/23 职场文书
计算机应用专业自荐信
2014/07/05 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
青涩记忆观后感
2015/06/18 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
学校少先队工作总结
2015/08/12 职场文书