1、父组件访问子组件
1、$chidlren(用的少)
我们先来看下$children的访问
this.$children是一个数组类型,它包含所有子组件对象。
我们这里通过一个遍历,取出所有子组件的message状态。
在父组件中的btnClick中访问子组件:
btnClick() { //1.$children console.log(this.$children); for (let c of this.$children) { console.log(c.name); c.showMessage(); } } }
访问父组件的第一个子组件:
console.log(this.$children[0]);
完整代码如下:
<div id="app"> <cpn></cpn> <cpn></cpn> <cpn></cpn> <cpn ></cpn> <cpn ></cpn> <button @click="btnClick">按钮</button> </div> <template id="cpn"> <div>我是子组件</div> </template> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app', data: { message: 'hello' }, methods: { btnClick() { //1.$children console.log(this.$children); for (let c of this.$children) { console.log(c.name); c.showMessage(); } } }, components: { cpn: { template: '#cpn', data() { return { name: '我是子组件的name' } }, methods: { showMessage() { console.log('showMessage'); } } } } }) </script>
2、$refs(用的多)
$children的缺陷:
通过$children访问子组件时,是一个数组类型,访问其中的子组件必须通过索引值。
但是当子组件过多,我们需要拿到其中一个时,往往不能确定它的索引值,甚至还可能会发生变化。
有时候,我们想明确获取其中一个特定的组件,这个时候就可以使用$refs
$refs的使用:
1、$refs和ref指令通常是一起使用的。
2、首先,我们通过ref给某一个子组件绑定一个特定的ID。
3、其次,通过this.$refs.ID就可以访问到该组件了。
完整代码:
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
<cpn ref="aaa"></cpn>
<cpn ref="bbb"></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>我是子组件</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
methods: {
btnClick() {
//2.$refs .>对象类型,默认是一个空的对象 比如我们再组件中加上ref=”xxx“
console.log(this.$refs);
console.log(this.$refs.aaa);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是子组件的name'
}
},
methods: {
showMessage() {
console.log('showMessage');
}
}
}
}
})
</script>
2、子组件访问父组件
1、$parent(用的少)
如果我们想在子组件中直接访问父组件,可以通过$parent
注意事项:
尽管在Vue开发中,我们允许通过$parent来访问父组件,但是在真实开发中尽量不要这样做。
子组件应该尽量避免直接访问父组件的数据,因为这样耦合度太高了。
如果我们将子组件放在另外一个组件之内,很可能该父组件没有对应的属性,往往会引起问题。
另外,更不好做的是通过$parent直接修改父组件的状态,那么父组件中的状态将变得飘忽不定,很不利于我的调试和维护。
完整代码
<body>
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<div>我是cpn组件</div>
<ccpn></ccpn>
</div>
</template>
<template id="ccpn">
<div>
<div>我是子子组件</div>
<button @click="btnClick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是cpn的组件name'
}
},
components: {
ccpn: {
template: "#ccpn",
methods: {
btnClick() {
//1、访问父组件 $parent
console.log(this.$parent);
console.log(this.$parent.name);
console.log(this.$parent.$parent.message);
},
}
}
}
}
}
})
</script>
</body>
2、$root
.访问根组件 $root
this.$root.根组件属性
完整代码:
<template id="ccpn">
<div>
<div>我是子子组件</div>
<button @click="btnClick">按钮</button>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello'
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: '我是cpn的组件name'
}
},
components: {
ccpn: {
template: "#ccpn",
methods: {
btnClick() {
//2.访问根组件 $root
console.log('-----------');
console.log(this.$root.message);
},
}
}
}
}
}
})
</script>
参考链接:
https://www.bilibili.com/video/BV1H7411j7Mc?from=search&seid=10645859101733219162