有时候我们需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问跟组件。
**父组件访问子组件:**使用
c
h
i
l
d
r
e
n
或
children或
children或refs
**子组件访问父组件:**使用$parent
我们先来看下$children的访问
this.$children是一个数组类型,它包含所有子组件对象。
我们这里通过一个遍历,取出所有子组件的message状态。
$children的缺陷
通过$children
访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。但是当子组件过多
我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用'$refs'
$refs的使用:
$refs
和ref指令通常是一起使用的。
首先,我们通过ref给某一个子组件绑定一个特定的ID。
其次,通过this.$refs.ID就可以访问到该组件了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入你的vue路径 -->
<script src="./vue.min.js"></script>
</head>
<body>
<div id="app">
<cpn ref="aaa"></cpn>
<button @click="btnClick">按钮 </button>
</div>
<template id="cpn">
<div>
<p>我是子组件</p>
</div>
</template>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好啊"
},
methods: {
// btnClick() {
// console.log(this.$children[0].name)
// }
btnClick() {
console.log(this.$refs.aaa.name)
}
},
components: {
cpn: {
template: "#cpn",
data() {
return {
name: "我是子组件的name"
}
},
methods: {
showMessage() {
console.log('showMessage');
}
}
}
}
})
</script>
</body>
</html>