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.组件化之：父子组件的访问方式的主要内容，如果未能解决你的问题，请参考以下文章