Heim > Artikel > Web-Frontend > Wie kommuniziere ich zwischen Vue-Komponenten? Methodeneinführung
Wie kommuniziere ich zwischen Vue-Komponenten? Methodeneinführung
- 青灯夜游nach vorne
- 2020-10-26 17:54:452195Durchsuche
Komponentenkommunikation
Obwohl die untergeordnete Komponente this.$parent verwenden kann, um auf ihre übergeordnete Komponente und jede Instanz in der übergeordneten Kette zuzugreifen, sollte die untergeordnete Komponente vermeiden, sich direkt auf die Daten der übergeordneten Komponente zu verlassen, und dies versuchen Verwenden Sie es explizit, Requisiten übergeben Daten.
Darüber hinaus ist es eine sehr schlechte Praxis, den Status der übergeordneten Komponente in der untergeordneten Komponente zu ändern, weil:
Dadurch sind die übergeordnete Komponente und die untergeordnete Komponente eng gekoppelt.
Es ist schwer zu verstehen Die übergeordnete Komponente kann nur anhand ihres Status erkannt werden. Weil es von jeder Unterkomponente geändert werden kann! Im Idealfall kann nur die Komponente selbst ihren Zustand ändern.
Jede Vue-Instanz ist ein Ereignisauslöser:
$on() – auf Ereignisse warten.
$emit() – Ereignisse in der Bereichskette nach oben versenden. (Trigger-Ereignis)
$dispatch() – Versendet ein Ereignis, das entlang der übergeordneten Kette aufsteigt.
$broadcast() – Übertragen Sie das Ereignis und geben Sie das Ereignis nach unten an alle Nachkommen weiter.
Abhören und Auslösen
v-on lauscht auf benutzerdefinierte Ereignisse:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--子组件模板-->
<template id="child-template">
<input v-model="msg" />
<button v-on:click="notify">Dispatch Event</button>
</template>
<!--父组件模板-->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child v-on:child-msg="handleIt"></child>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
template: '#child-template',
data: function (){
return { msg: 'hello' }
},
methods: {
notify: function() {
if(this.msg.trim()){
this.$dispatch('child-msg',this.msg);
this.msg = '';
}
}
}
})
// 初始化父组件
// 在收到消息时将事件推入一个数组中
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
methods:{
'handleIt': function(){
alert("a");
}
}
})
</script>
</html>
Die übergeordnete Komponente kann v-on direkt verwenden, wobei die untergeordnete Komponente zum Abhören von Ereignissen verwendet wird, die von der untergeordneten Komponente ausgelöst werden:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</html>
Hören Sie sich ein natives Ereignis im Stammelement einer Komponente an. Sie können .native verwenden, um v-on zu ändern. Zum Beispiel:
<my-component v-on:click.native="doTheThing"></my-component>
Versandereignis - $dispatch()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>Messages: {{ messages | json }}</p>
<child-component></child-component>
</div>
<template id="child-component">
<input v-model="msg" />
<button v-on:click="notify">Dispatch Event</button>
</template>
<script src="js/vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
msg: ''
}
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父组件
new Vue({
el: '#app',
data: {
messages: []
},
events: {
'child-msg': function(msg) {
this.messages.push(msg)
}
}
})
</script>
</body>
</html>
Das Schaltflächenelement der Unterkomponente ist an das Klickereignis gebunden, das auf die Benachrichtigungsmethode verweist.
Wenn die Benachrichtigungsmethode des Unterkomponente wird verarbeitet, $dispatch wird aufgerufen, das Ereignis wird an das Ereignis „child-msg“ der übergeordneten Komponente gesendet und ein msg-Parameter wird für das Ereignis bereitgestellt. Das Ereignis „child-msg“ wird in der Option „events“ von definiert Übergeordnete Komponente, und die übergeordnete Komponente empfängt die untergeordnete Komponente. Nach dem Versand wird das Ereignis „child-msg“ aufgerufen.
- Broadcast-Ereignis – $broadcast()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<input v-model="msg" />
<button v-on:click="notify">Broadcast Event</button>
<child-component></child-component>
</div>
<template id="child-component">
<ul>
<li v-for="item in messages">
父组件录入了信息：{{ item }}
</li>
</ul>
</template>
<script src="js/vue.js"></script>
<script>
// 注册子组件
Vue.component('child-component', {
template: '#child-component',
data: function() {
return {
messages: []
}
},
events: {
'parent-msg': function(msg) {
this.messages.push(msg)
}
}
})
// 初始化父组件
new Vue({
el: '#app',
data: {
msg: ''
},
methods: {
notify: function() {
if (this.msg.trim()) {
this.$broadcast('parent-msg', this.msg)
}
}
}
})
</script>
</body>
</html>Das Gegenteil von Dispatch-Ereignis. Ersteres ist in der untergeordneten Komponente gebunden und ruft $dispatch auf, um es an die übergeordnete Komponente zu senden. Letzteres ist in der übergeordneten Komponente gebunden und ruft $broadcast auf, um es an die untergeordnete Komponente zu senden.
Zugriff zwischen übergeordneten und untergeordneten KomponentenÜbergeordnete Komponente für den Zugriff auf die untergeordnete Komponente: Verwenden Sie $children oder $refs.
Untergeordnete Komponente für den Zugriff auf die übergeordnete Komponente: Verwenden Sie die untergeordnete Komponente $parent, um auf die Root-Komponente zuzugreifen Komponente: Verwenden Sie $root
-
$children:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component"> <child-component1></child-component1> <child-component2></child-component2> <button v-on:click="showChildComponentData">显示子组件的数据</button> </template> <template id="child-component1"> <h2>This is child component 1</h2> </template> <template id="child-component2"> <h2>This is child component 2</h2> </template> <script src="js/vue.js"></script> <script> Vue.component('parent-component', { template: '#parent-component', components: { 'child-component1': { template: '#child-component1', data: function() { return { msg: 'child component 111111' } } }, 'child-component2': { template: '#child-component2', data: function() { return { msg: 'child component 222222' } } } }, methods: { showChildComponentData: function() { for (var i = 0; i < this.$children.length; i++) { alert(this.$children[i].msg) } } } }) new Vue({ el: '#app' }) </script> </body> </html> - $ref kann die Index-ID für untergeordnete Komponenten angeben:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="parent-component">
<!--<child-component1></child-component1>
<child-component2></child-component2>-->
<child-component1 v-ref:cc1></child-component1>
<child-component2 v-ref:cc2></child-component2>
<button v-on:click="showChildComponentData">显示子组件的数据</button>
</template>
<template id="child-component1">
<h2>This is child component 1</h2>
</template>
<template id="child-component2">
<h2>This is child component 2</h2>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('parent-component', {
template: '#parent-component',
components: {
'child-component1': {
template: '#child-component1',
data: function() {
return {
msg: 'child component 111111'
}
}
},
'child-component2': {
template: '#child-component2',
data: function() {
return {
msg: 'child component 222222'
}
}
}
},
methods: {
showChildComponentData: function() {
// for (var i = 0; i < this.$children.length; i++) {
// alert(this.$children[i].msg)
// }
alert(this.$refs.cc1.msg);
alert(this.$refs.cc2.msg);
}
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>Der Effekt ist der gleiche wie bei $children. $parent: <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="parent-component">
<child-component></child-component>
</template>
<template id="child-component">
<h2>This is a child component</h2>
<button v-on:click="showParentComponentData">显示父组件的数据</button>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('parent-component', {
template: '#parent-component',
components: {
'child-component': {
template: '#child-component',
methods: {
showParentComponentData: function() {
alert(this.$parent.msg)
}
}
}
},
data: function() {
return {
msg: 'parent component message'
}
}
})
new Vue({
el: '#app'
})
</script>
</body>
</html>
Wie eingangs erwähnt, wird nicht empfohlen, den Status der übergeordneten Komponente in der untergeordneten Komponente zu ändern.
Nicht-Eltern-Kind-Komponentenkommunikation
Manchmal müssen auch Komponenten mit Nicht-Eltern-Kind-Beziehung kommunizieren. Verwenden Sie in einem einfachen Szenario eine leere Vue-Instanz als zentralen Ereignisbus:
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
// ...
})Verwandte Empfehlungen: Zusammenfassung der Front-End-Vue-Interviewfragen 2020 (mit Antworten)
Vue-Tutorial-Empfehlung: 2020 neueste A Auswahl von 5 vue.js-Video-Tutorials
Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung
! !
Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen Vue-Komponenten? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Vertiefendes Verständnis des Diff-Algorithmus in vue.js
- Eine kurze Diskussion über Props (unidirektionaler Datenfluss) in vue.js
- Wie implementiert man eine elektronische Signaturkomponente in Vue?
- Detaillierte Erläuterung der Verwendung von watch in vue.js
- Erfahren Sie mehr über die integrierten Filter von Vue
- Einführung in die schnelle Erstellung von Vue-Vorlagen in vscode