Parent and child components access each other
The parent component accesses the child component:
- $children :
this.$children is a type that gets all the child components.
Disadvantage: When accessing a certain sub-component, it can only be accessed through the index value. - $refs :
this.$refs is paired with ref to assign a specific refID to the ref of the subcomponent, and then access the specific subcomponent through this.$refs.refID.
Child component access to parent component
- parent $: :
. subassembly can be accessed directly through this $ parent parent component, but generally not in the actual development of the sub-assembly by calling this $ parent to visit a parent component. In actual development, the child component should try to avoid visiting the parent component to reduce the coupling degree of the parent-child component and avoid the developer's debugging and maintenance.
effect
Call children and ref+refs in info to print out the child components
, call parent to print the parent component info in the child1 component, call children to print the child component child2,
in the child2 component, print the parent component child1 by calling parent, call parent.Parent component attribute name Print the attribute value of the parent component, call root to print the root component
test code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9父子组件互相访问</title>
</head>
<body>
<div id="info">
<!-- 我是父组件（根组件）-->
<h3>我是父组件（根组件）</h3>
<button @click="printchildren">打印我的子组件</button>
<button @click="printpchild1">通过children打印第一个子组件</button>
<button @click="printpchild3">通过ref打印子组件child3</button>
<!-- 子组件-->
<child1></child1>
<child3 ref="pchild3"></child3>
</div>
<template id="child1">
<div>
<h3>我是vue实例的子组件child1</h3>
<button @click="printfather">打印我的父组件info</button>
<button @click="printchild2">打印我的子组件child2</button>
<!-- 子组件-->
<child2></child2>
</div>
</template>
<template id="child3">
<div>
<h3>我是vue实例的第二个子组件child3</h3>
</div>
</template>
<template id="child2">
<div>
<h3>我是child1组件的子组件child2</h3>
<button @click="printchild1">打印我的父组件child1</button>
<button @click="printparentpro">打印父组件child1的name、age属性</button>
<button @click="printroot">打印根组件</button>
</div>
</template>
<script src="../../js/vue.js"></script>
<script>
// 子组件child2
const child2 = {
template: `#child2`,
methods: {
printchild1(){
console.log("打印我的父组件child1");
console.log(this.$parent);
console.log("----------分割线---------------")
},
printparentpro(){
console.log("child2父组件child1的name");
console.log(this.$parent.name);
console.log("child2父组件child1的age")
console.log(this.$parent.age);
console.log("----------分割线---------------")
},
printroot(){
console.log("打印根组件");
console.log(this.$root);
console.log("----------分割线---------------")
}
}
}
// 子组件child1
const child1 = {
template: `#child1`,
data(){
return {
name: "my name is child1",
age: "my age is 3-year-old",
}
},
methods: {
printfather(){
console.log("打印我的父组件info");
console.log(this.$parent);
console.log("----------分割线---------------")
},
printchild2(){
console.log("打印我的子组件child2");
console.log(this.$children);
console.log("----------分割线---------------")
}
},
components: {
child2,
}
}
// 子组件child3
const child3 = {
template: `#child3`,
}
// 把vue实例看作父组件
const info = new Vue({
el : "#info",
components: {
child1,
child3
},
methods: {
printchildren(){
console.log("打印我的子组件");
console.log(this.$children);
console.log("----------分割线---------------");
},
printpchild1(){
console.log("调用children打印我的子组件child1");
console.log(this.$children[0]);
console.log("----------分割线---------------");
},
printpchild3(){
console.log("调用ref打印我的子组件child3");
console.log(this.$refs.pchild3);
console.log("----------分割线---------------");
}
}
})
</script>
</body>
</html>