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实现的页面关键字密度查询代码
Dec 27 Javascript
子窗口、父窗口和Silverlight之间的相互调用
Aug 16 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
jQuery插件开发全解析
Oct 10 Javascript
js读取cookie方法总结
Oct 31 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
es6 字符串String的扩展(实例讲解)
Aug 03 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
vue中的循环对象属性和属性值用法
Sep 04 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
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
php测试kafka项目示例
2020/02/06 PHP
jquery中获取select选中值的代码
2011/06/27 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
JS是按值传递还是按引用传递
2015/01/30 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
2018/09/14 Javascript
nodejs基础之buffer缓冲区用法分析
2018/12/26 NodeJs
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
python通过socket查询whois的方法
2015/07/18 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python 计算数组中每个数字出现多少次--“Bucket”桶的思想
2017/12/19 Python
python模糊图片过滤的方法
2018/12/14 Python
简单易懂Pytorch实战实例VGG深度网络
2019/08/27 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Python之字典对象的几种创建方法
2020/09/30 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
如何查看浏览器对html5的支持情况
2020/12/15 HTML / CSS
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
学生个人求职自荐信格式
2013/09/23 职场文书
安全生产标语
2014/06/06 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
公司总经理岗位职责
2015/04/01 职场文书
结婚纪念日感言
2015/08/01 职场文书
在redisCluster中模糊获取key方式
2021/07/09 Redis