【vue】$parent和$children的使用

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

$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>

在这里插入图片描述
(但是在实际中$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>

在这里插入图片描述

$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>

点击(父组件)按钮之后:
在这里插入图片描述
我们还可以通过循环拿到所有子组件数据:

<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>

点击(父组件)按钮之后:
在这里插入图片描述
因为是数组,所以我们可以通过比如: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>

点击(父组件)按钮之后:
在这里插入图片描述

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

参考:
vue父子组件间引用: p a r e n t 、 parent、 parentchildren

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值