Implementierungsmethode der Wertübertragungsfunktion für benachbarte Komponenten im Vue-Dokument-View.js-php.cn

Implementierungsmethode der Wertübertragungsfunktion für benachbarte Komponenten im Vue-Dokument

PHPz

Freigeben： 2023-06-20 18:28:48

Original

1077 Leute haben es durchsucht

Vue muss als beliebtes Front-End-Framework häufig Wertübertragungsfunktionen zwischen Komponenten implementieren. Unter diesen erfolgt die Übertragung der Werte benachbarter Komponenten hauptsächlich durch Aufrufen der Methode der Komponente. In diesem Artikel wird die Implementierungsmethode der Wertübertragungsfunktion für benachbarte Komponenten in Vue vorgestellt.

1. Übergeordnete Komponente übergibt Wert an untergeordnete Komponente

In Vue wird die V-Bind-Anweisung verwendet, um den Wert der übergeordneten Komponente an die untergeordnete Komponente zu binden. Der spezifische Implementierungscode lautet wie folgt:

In der übergeordneten Komponente:

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

Nach dem Login kopieren

In der untergeordneten Komponente:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

Nach dem Login kopieren

Der obige Code übergibt die Daten der übergeordneten Komponente parentData über v- bind:data</code > An das Attribut <code>data der untergeordneten Komponente binden. parentData 通过 v-bind:data 绑定到子组件的 data 属性中。

2.子组件向父组件传递值

在Vue中，子组件需要通过 $emit 方法向父组件发送一个事件。在父组件中注册该事件，并在回调函数中处理子组件发送的数据。具体实现代码如下：

在父组件中：

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

Nach dem Login kopieren

在子组件中：

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

Nach dem Login kopieren

上述代码中，子组件通过 v-on:click 绑定 sendDataToParent 方法，在方法中通过 $emit 方法向父组件发送事件 send-data 并传递数据 Hello, Parent! 。在父组件中，通过 v-on:send-data 注册事件 send-data 的回调函数 handleChildData ，并在函数中处理子组件传回的参数。

3.兄弟组件之间传递值

兄弟组件之间传递数据时，需要通过父组件作为中间桥梁。具体实现代码如下：

在父组件中：

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

Nach dem Login kopieren

在子组件1中：

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

Nach dem Login kopieren

在子组件2中：

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

<script>
export default {
  props: ['data']
}
</script>

Nach dem Login kopieren

上述代码中，子组件1向父组件发送事件 update-data 并传递数据 Hello, Brother 2! ；父组件中监听该事件 v-on:update-data 并在函数中处理数据 handleBrotherData ，并将处理后的数据通过 v-bind:data 绑定到子组件2的 data

2. Untergeordnete Komponente übergibt Wert an übergeordnete Komponente

In Vue muss die untergeordnete Komponente über die Methode $emit ein Ereignis an die übergeordnete Komponente senden. Registrieren Sie das Ereignis in der übergeordneten Komponente und verarbeiten Sie die von der untergeordneten Komponente gesendeten Daten in der Rückruffunktion. Der spezifische Implementierungscode lautet wie folgt: 🎜🎜In der übergeordneten Komponente: 🎜rrreee🎜In der untergeordneten Komponente: 🎜rrreee🎜Im obigen Code bindet die untergeordnete Komponente sendDataToParent über v-on :click Code>-Methode, bei der das Ereignis send-data über die Methode $emit an die übergeordnete Komponente gesendet und die Daten an übergeben werden Hallo, Eltern!. Registrieren Sie in der übergeordneten Komponente die Rückruffunktion handleChildData des Ereignisses send-data bis v-on:send-data und behandeln Sie das untergeordnete Element in den von der Komponente zurückgegebenen Funktionsparametern. 🎜🎜3. Übertragen von Werten zwischen Geschwisterkomponenten🎜🎜Beim Übertragen von Daten zwischen Geschwisterkomponenten müssen Sie die übergeordnete Komponente als Zwischenbrücke verwenden. Der spezifische Implementierungscode lautet wie folgt: 🎜🎜In der übergeordneten Komponente: 🎜rrreee🎜 In der untergeordneten Komponente 1: 🎜rrreee🎜 In der untergeordneten Komponente 2: 🎜rrreee🎜Im obigen Code sendet die untergeordnete Komponente 1 den Ereignis-update- zu den Daten der übergeordneten Komponente und übergeben Sie die Daten Hallo, Bruder 2!; die übergeordnete Komponente hört auf das Ereignis v-on:update-data und verarbeitet die Daten in der Funktion handleBrotherData und bindet die verarbeiteten Daten über v-bind:data an das Attribut data der Unterkomponente 2. 🎜🎜Zusammenfassend lässt sich sagen, dass die Implementierungsmethode der Wertübergabefunktionen benachbarter Komponenten in Vue hauptsächlich durch Wertbindung und Ereigniskommunikation zwischen übergeordneten und untergeordneten Komponenten vervollständigt wird. Die übergeordnete Komponente dient als Zwischenbrücke zwischen Geschwisterkomponenten. Diese Methode ist einfach, leicht verständlich, flexibel und bequem und eine sehr wichtige Komponentenkommunikationsmethode in Vue. 🎜

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der Wertübertragungsfunktion für benachbarte Komponenten im Vue-Dokument. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!