VUE学习笔记：11.组件化之：父子组件的访问方式

最新推荐文章于 2022-08-30 10:30:30 发布

new nm个对象

最新推荐文章于 2022-08-30 10:30:30 发布

阅读量154

点赞数 3

分类专栏： vue学习笔记文章标签： vue 前端

本文链接：https://blog.csdn.net/ouyicnm/article/details/117828177

版权

vue学习笔记专栏收录该内容

29 篇文章 11 订阅

订阅专栏

1.父子组件的访问

在这里插入图片描述

2.父组件访问子组件对象

（1）`$children`方式

父组件中可以使用$children来获取所有子组件的对象，返回的是一个数组。
通过子组件对象可以获取到子组件的数据，方法等所有东西。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc></mycpnc>
	<mycpnc></mycpnc>
	<mycpnc></mycpnc>
	<button type="button" @click="btnclick">按钮</button>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>我是子组件</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {message:0},
		methods:{
			btnclick: function(){
				console.log(this.$children) // 通过$children获取所有的子组件对象，父组件的模板中使用了多少子组件就会返回多少个对象
				console.log(this.$children[0].dmessage) // 获取第一个子组件中的数据dmessage
				this.$children[0].dmethod() //使用第一个子组件中的方法dmethod
			}
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				data:function(){
					return {
						dmessage:'我是子组件中的数据' //定义子组件中的数据
					}
				},
				methods:{
					//定义子组件中的方法
					dmethod:function(){
						console.log('我是子组件中的方法')
					}
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
但是实际开发中我们一般不会使用$children来获取子组件，因为它返回的是一个数组，需要使用下标来获取具体的子组件对象。当我们的模板中引用新的子组件时，数组就改变了，这会导致代码难以维护。

（2）`$refs`方式

在父组件中使用子组件时，在子组件标签上添加ref="xxx"属性。
在父组件中使用$refs来获取子组件对象，返回的是一个对象。key为子组件标签中的ref值，value为子组件对象。
如果子组件标签中没有ref标签，使用$refs则不能获取到该子组件对象。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc ref="aaa"></mycpnc>
	<mycpnc ref="bbb"></mycpnc>
	<mycpnc></mycpnc>
	<button type="button" @click="btnclick">按钮</button>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>我是子组件</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {message:0},
		methods:{
			btnclick: function(){
				console.log(this.$refs) // 通过$refs来获取子组件，返回一个对象。key为子组件标签中的ref属性值，value则为对应子组件本身
				console.log(this.$refs.aaa.dmessage) // 获取aaa子组件中的数据dmessage
				this.$refs.aaa.dmethod() //使用aaa子组件中的方法dmethod
			}
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				data:function(){
					return {
						dmessage:'我是子组件中的数据' //定义子组件中的数据
					}
				},
				methods:{
					//定义子组件中的方法
					dmethod:function(){
						console.log('我是子组件中的方法')
					}
				}
			}
		}
    })
</script>
</body>
</html>

运行结果如下：
在这里插入图片描述
在实际开发中我们基本上都是使用这种方式来获取子组件，因为这种方式更加易于维护，即使父组件中使用的其他子组件发生变化，也不会有影响。

3.子组件访问父组件对象

在子组件中可以使用$parent来获取它的上一级组件对象，返回的是一个组件对象。
在子组件中可以使用$root来获取它的根组件对象，注意返回的是最外层的组件对象（如果定义中vue实例中，那么返回的就是vue实例对象）
可以通过返回的父组件对象获取父组件中的数据，方法等内容。
尽量不要使用$parent方法来获取父组件中的数据或者方法。因为这会大大增加组件之间的耦合性，降低组件的复用性。我们在开发组件时是希望组件尽量能在任何地方复用的，当我们把某个子组件注册到多个不同的组件中时，那么子组件中使用$parent来获取的数据或者方法可能在某个父组件中不存在，从而导致代码报错。

new nm个对象

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
VUE学习笔记：11.组件化之：父子组件的访问方式

1.父子组件的访问2.父组件访问子组件对象（1）$children方式父组件中可以所有$children来获取所有子组件的对象，返回的是一个数组。通过子组件对象可以获取到子组件的数据，方法等所有东西。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body&gt
复制链接

扫一扫