親コンポーネントと子コンポーネントは相互にアクセスします
親コンポーネントは子コンポーネントにアクセスします。
- $ children：
this。$ childrenは、すべての子コンポーネントを取得するタイプです。
短所：特定のサブコンポーネントにアクセスする場合、インデックス値を介してのみアクセスできます。 - $ refs：
this。$ refsはrefとペアになって、特定のrefIDをサブコンポーネントのrefに割り当て、this。$ refs.refIDを介して特定のサブコンポーネントにアクセスします。
親コンポーネントへの子コンポーネントのアクセス
- 親$： ：。
親コンポーネントを訪問するためにこの$親を呼び出すことによって、サブアセンブリ、この$親親コンポーネントから直接アクセスすることができますが、一般的ではないサブアセンブリの実際の開発で。実際の開発では、子コンポーネントは、親子コンポーネントの結合度を下げ、開発者のデバッグとメンテナンスを回避するために、親コンポーネントへのアクセスを回避するように努める必要があります。
効果
情報内の子とref + refを
呼び出して子コンポーネントを印刷し、親を呼び出してchild1コンポーネントに親コンポーネント情報を印刷し、childrenを呼び出して子コンポーネントchild2を印刷
し、child2コンポーネントで、親を呼び出して親コンポーネントchild1を印刷します、親を呼び出します。親コンポーネントの属性名親コンポーネントの属性値を出力し、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>