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

Posted new nm个对象

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE学习笔记: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来获取的数据或者方法可能在某个父组件中不存在,从而导致代码报错。

以上是关于VUE学习笔记:11.组件化之:父子组件的访问方式的主要内容,如果未能解决你的问题,请参考以下文章

vue.js学习笔记七

vue.js学习笔记七

vue.js学习笔记七

vue.js学习笔记— 父子组件之间通信的第一种方式 props 和 $emit

## vue学习笔记--简单父子组件--

Vue学习笔记入门篇——组件的通讯