Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der Eltern-Kind-Kommunikation zwischen Vue-Komponenten
Dieser Artikel stellt hauptsächlich die relevanten Informationen zur Eltern-Kind-Kommunikation zwischen Vue-Komponenten vor. Ich hoffe, dass er jedem helfen kann.
3. Kommunikation zwischen Komponenten ($parent $refs)
Wenn die übergeordnete Komponente die Daten der untergeordneten Komponente erhalten möchte:
①Geben Sie beim Aufrufen der untergeordneten Komponente das Ref-Attribut
eb1a5c937f0039c5b61d148db634d15f53b801b01e70268453ed301cb998e90c
an② Suchen Sie das Instanzobjekt der untergeordneten Komponente gemäß dem Namen der angegebenen Referenz
this.$refs.mySon
Wenn die untergeordnete Komponente dies möchte Holen Sie sich die Daten der übergeordneten Komponente:
① Lesen Sie direkt
this.$parent
Erhalten Sie die Daten der untergeordneten Komponente über this.$refs
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-01</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//vue提供的ref
Vue.component("dahua",{
data:function(){
return{
mySonName:""
}
},
methods:{
//通过$refs拿到指定的所引用的对应的组件的实例对象
getSonName:function(){
this.mySonName = this.$refs.mySon.name;
}
},
template:`
<p>
<h1>这是父组件</h1>
<button @click = "getSonName">获取子组件数据</button>
<span>{{mySonName}}</span>
<hr>
<xiaohua ref="mySon"></xiaohua>
</p>
`
})
// 创建子组件
Vue.component("xiaohua",{
data:function(){
return{
name:"小花"
}
},
template:`
<h1>这是子组件</h1>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Die untergeordnete Komponente erhält die Daten der übergeordneten Komponente über $parent
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>组件间通信-02</title>
<script src="js/vue.js"></script>
</head>
<body>
<p id="container">
<p>{{msg}}</p>
<dahua></dahua>
</p>
<script>
//创建子组件
Vue.component("dahua",{
data:function(){
return{
myName:"大花"
}
},
template:`
<p>
<h1>这是父组件</h1>
<hr>
<xiaohua></xiaohua>
</p>
`
})
//创建子组件
Vue.component("xiaohua",{
data:function(){
return{
msg:""
}
},
template:`
<p>
<h1>这是子组件</h1>
<p>{{msg}}</p>
</p>
`,
created:function(){
//在子组件创建完成时获取父组件的数据
//保存在msg中在p标签中显示
this.msg = this.$parent.myName;
}
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>Verwandte Empfehlungen:
PHP behandelt Auswahlprobleme auf Eltern-Kind-Ebene
react.js Datenbindung der Eltern-Kind-Komponente real Beispielanzeige für zeitbasierte Kommunikation
Eltern-Kind-Liste Lösungsideen für die Array-Sortiermethode
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Eltern-Kind-Kommunikation zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!