父子组件互相访问
父组件访问子组件:
- $children :
this.$children是一个类型,获得所有的子组件。
缺点:访问某个子组件时只能通过索引值去访问。 - $refs :
this.$refs与ref配对使用,给子组件的ref赋一个特定的refID,再通过this.$refs.refID去访问特定的子组件。
子组件访问父组件
- $parent::
子组件可以通过this.$parent直接访问父组件,但实际开发中一般不会在子组件中通过调用this.$parent去访问父组件。实际开发中子组件应该尽量避免去访问父组件,以降低父子组件的耦合度,免于开发人员的调试和维护。
效果
在info中分别调用children、ref+refs打印输出子组件
在child1组件中调用parent打印父组件info、调用children打印子组件child2
在child2组件中通过调用parent打印父组件child1、调用parent.父组件属性名打印父组件的属性值、调用root打印根组件
测试代码
<!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>