Sometimes we need the parent component to directly access the child component, the child component to directly access the parent component, or the child component to access the root component.
Method summary:
- The parent component accesses the child component:
$childrenor$refs - Child component access parent component:
$parent - The child components access the root component (the root Vue instance created by new Vue):
$root
The following is a detailed demonstration:
1. The parent component accesses the child component
1.1 Use $children
Within parent components used this.$childrento get an array type, it contains all the sub-component instances.
<div id="app">
<cpn></cpn>
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
},
methods: {
btnClick() {
//1.拿到所有子组件，是一个数组
console.log(this.$children);
//2.拿到一个组件实例，可以直接访问子组件中的方法和 data 中的数据
this.$children[0].showMessage();
console.log(this.$children[0].name);
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'webchang'
}
},
methods: {
showMessage() {
console.log('我是子组件');
}
}
}
}
});
</script>
1.2 Use $refs
$children Defects:
- By
$childrenaccessing the sub-assembly, it is an array type, in which the access through the index value must subassembly. - But when there are too many sub-components and we need to get one of them, we often cannot determine its index value, and may even change.
- Sometimes, we want to explicitly obtain one of the specific components, this time we can use
$refs
$refs usage of:
$refsAndrefinstructions are typically used together.- First, we add a sub-assemblies on the
refproperty, which is equivalent to a sub-component is bound to a particular ID. - Secondly,
this.$refsto get all the sub-components labeled with the ref attribute (if no instance of a sub-assembly ref attribute, can not get in this way) and get a final target , the property name is an example of subassembly ref attribute, the attribute value is the component instance. - By
this.$refs.IDcan access to the component.
<div id="app">
<cpn ref="child1"></cpn>
<cpn ref="child2"></cpn>
<!-- 这个子组件实例没有 ref 属性，通过 this.$refs 方式拿不到这个组件实例 -->
<cpn></cpn>
<button @click="btnClick">按钮</button>
</div>
<template id="cpn">
<div>
<h1>我是子组件</h1>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: "hello"
},
methods: {
btnClick() {
console.log(this.$refs);
console.log(this.$refs.child1);
console.log(this.$refs.child1.name);
this.$refs.child1.showMessage();
}
},
components: {
cpn: {
template: '#cpn',
data() {
return {
name: 'webchang'
}
},
methods: {
showMessage() {
console.log('我是子组件');
}
}
}
}
});
</script>
The result is shown in the figure:
2. The Son Visits the Father
2.1 Use $parent
If we want to directly access the parent component in the child component, we can pass $parent
Precautions:
- Although the Vue development, allows us
$parentto access the parent component, but try not to do this in real development. - Child components should try to avoid directly accessing the data of the parent component, because the coupling is too high.
- If we put the child component in another component, it is likely that the parent component does not have corresponding properties, which often causes problems.
- In addition, it is not by
$parentdirectly modifying the parent component of the state, then the state will become the parent component erratic, very conducive to my commissioning and maintenance.
2.2 Use $root
Use $rootcan be accessed directly Vue root instances
<div id="app">
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h1>我是子组件的标题</h1>
<button @click="btnClick">我是子组件的按钮</button>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
},
components: {
cpn: {
template: '#cpn',
methods: {
btnClick() {
console.log(this.$parent);
console.log(this.$root);
}
}
}
}
});
</script>
In this code, the parent component of the child component happens to be the Vue root instance
