2.3 父子组件的访问方式

最新推荐文章于 2024-08-08 11:15:06 发布

XinXun

最新推荐文章于 2024-08-08 11:15:06 发布

阅读量157

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/zpxinxun/article/details/117152077

版权

Vue 专栏收录该内容

22 篇文章 3 订阅

订阅专栏

有时候我们需要父组件直接访问子组件（通过$children或$refs），子组件直接访问父组件（$parent）。

$children

this.$children是一个对象数组类型，它包括所有子组件对象。通过该对象数组可以读或写子组件中的数据、调用子组件的方法。弊端是有多个子组件时通过对象数组下标访问子组件，无法适应子组件的数量发生变化的情况。

<body>
	<div id="app">
		<cpn></cpn>
		<!-- 使用单标签此处出问题，在CLI里面不存在该问题 -->
		<!-- <cpn /> -->
		<button type="button" @click="btnClick">按钮</button>
	</div>
	<template id="cpn">
		<div>
			我是子组件---{{name}}
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			data:{
				message:'wangdou'
			},
			methods:{
				btnClick(){
					this.$children[0].name='linda'
				}
			},
			components:{
				cpn:{
					template:'#cpn',
					data(){
							return {
								name:'我是子组件中的变量'
							}
					},
					methods:{
						showMessage(){
							console.log('showMessage')
						}
					}
				}
			}
		})
	</script>
</body>

$refs

$refs为对象。其中key为子组件ref的属性值、value为子组件对象。通过该$refs对象可以读或写子组件中的数据、调用子组件的方法。

1.在子组件标签中添加 ref属性,2.在父组件中通过this.$refs.key访问子组件。

<body>
	<div id="app">
		<cpn></cpn>
		<cpn ref="com"></cpn>
		<cpn></cpn>
		<!-- 使用单标签此处出问题，在CLI里面不存在该问题 -->
		<!-- <cpn /> -->
		<button type="button" @click="btnClick">按钮</button>
	</div>
	<template id="cpn">
		<div>
			我是子组件---{{name}}
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			data:{
				message:'wangdou'
			},
			methods:{
				btnClick(){
					this.$refs.com.name='abc'					
				}
			},
			components:{
				cpn:{
					template:'#cpn',
					data(){
							return {
								name:'我是子组件中的变量'
							}
					},
					methods:{
						showMessage(){
							console.log('showMessage')
						}
					}
				}
			}
		})
	</script>
</body>

子组件访问父

在子组件中通过this.$parent访问父级对象。它也可以更改父对象中的数据，调用父对象中的方法。还有this.$root访问Vue实例。

<body>
	<div id="app">
		<cpn></cpn>
		{{message}}
	</div>
	<template id="cpn">
		<div>
			我是子组件
			<button type="button" @click="btnClick">按钮</button>
		</div>
	</template>
	<script src="vue/vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		const app=new Vue({
			el:'#app',
			data:{
				message:'linda'
			},
			components:{
				cpn:{
					template:'#cpn',
					data(){
							return {
								name:'hello'
							}
					},
					methods:{
						btnClick(){
							this.$parent.message='world'
						}
					}
				}
			}
		})
	</script>
</body>

通过$children、$refs、$parent、$root破坏了组件的独立性。