Vue.js ist ein beliebtes Front-End-Framework, das einen komponentenbasierten Entwicklungsansatz zum Erstellen komplexer interaktiver Anwendungen bietet. In Vue ist die Kommunikation zwischen Komponenten ein sehr wichtiger Teil. Sie kann uns helfen, Daten auszutauschen und zu koordinieren und die Entwicklungseffizienz zu verbessern. In diesem Artikel werden verschiedene Implementierungsmethoden der Komponentenkommunikation in Vue vorgestellt und entsprechende Codebeispiele angehängt.
props und $emit sind die grundlegendsten und am häufigsten verwendeten Komponentenkommunikationsmethoden in Vue. Requisiten werden verwendet, um Daten von der übergeordneten Komponente an die untergeordnete Komponente zu übergeben, und die Methode $emit wird verwendet, um benutzerdefinierte Ereignisse in der untergeordneten Komponente auszulösen und Daten an die übergeordnete Komponente zu übergeben.
Beispiel:
// Übergeordnete Komponente
// Requisiten verwenden, um Die Daten werden an die Unterkomponente übergeben und die von der Unterkomponente ausgelösten Ereignisse werden über @my-event überwacht ;
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
handleEvent(data) {
console.log(data);
}
}<button @click="sendMessage">发送消息</button>
$parent- und $children-Attribute werden innerhalb einer Komponente verwendet, um auf Instanzen ihrer übergeordneten oder untergeordneten Komponenten zuzugreifen.
Beispiel:
<script></p> import childComponent from './ChildComponent. vue';<ol start="2"><li>Standard exportieren {</li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>props: ['message'], // 接收父组件传递的数据
methods: {
sendMessage() {
this.$emit('my-event', 'Hello Parent!'); // 触发自定义事件，并传递数据给父组件
}
}</pre><div class="contentsignin">Nach dem Login kopieren</div></div></ol>}<p></script>
// Unterkomponente
components: {
'child-component': childComponent
},
mounted() {
console.log(this.$children); // 访问子组件实例
}<script> Eigenschaften und Methoden. <br></p>Beispiel: <p></p>// Übergeordnete Komponente <p><template><br> <child-component ref="childRef"></child-component></p></template><p><br><script><br> Exportstandard {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>子组件</pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>}<br></script>
// Untergeordnete Komponente
mounted() {
console.log(this.$parent); // 访问父组件实例
}Das obige ist der detaillierte Inhalt vonWas sind die Implementierungsmethoden der Vue-Komponentenkommunikation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
