Vue コンポーネント通信のデータ転送方法は何ですか?

Vue コンポーネント通信のデータ転送方法は何ですか?

Vue 開発では、コンポーネント通信は非常に重要な部分であり、コンポーネント通信を通じて、異なるコンポーネント間のデータ転送と対話が実現されます。 Vue は、props、emit、provide/inject、Vuex など、コンポーネント通信を実装するためのさまざまな方法を提供します。この記事では、これらのさまざまなデータ転送方法について説明し、対応するコード例を示します。

1. props と $emit

props は、親コンポーネントによって子コンポーネントにデータを渡すために使用され、子コンポーネントは props を通じて渡されたデータを受け取ります。 $emit は、子コンポーネントが親コンポーネントにデータを渡すために使用され、子コンポーネントはイベントをトリガーし、$emit を通じてデータを親コンポーネントに渡します。

<テンプレート>

<child-component :message="message" @update="updateMessage"></child-component>
<p>父组件收到子组件传递过来的数据：{{message}}</p>

<スクリプト>
ChildComponent を './ChildComponent' からインポートします。

デフォルトの {

components: {
  ChildComponent
},
data() {
  return {
    message: ''
  }
},
methods: {
  updateMessage(newMessage) {
    this.message = newMessage
  }
}

}

<script><br> デフォルトのエクスポート {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { message: '' } }, methods: { sendMessage() { this.$emit('update', this.message) } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br></ script></p><ol start="2"><li>provide/inject</li></ol><p>provide と inject は、階層コンポーネント間でデータを渡すための 1 組のオプションです。データは親コンポーネントを通じて提供され、データは親コンポーネントに注入されます。子コンポーネントを達成します。 Provide オプションはデータを提供し、inject オプションはデータを注入します。 </p><p><テンプレート><br> <div></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;p&gt;父组件提供数据：{{message}}&lt;/p&gt; &lt;child-component&gt;&lt;/child-component&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p></div><br></テンプレート></p><p><スクリプト><br> ChildComponent を './ChildComponent' からインポートします。</p><p>デフォルトの {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { ChildComponent }, provide() { return { message: 'Hello World!' } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br></script>

<script><br> デフォルトのエクスポート {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>inject: ['message']</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br></ script></p><ol start="3"><li>Vuex</li></ol><p>Vuex は、Vue が公式に提供する状態管理モードで、コンポーネント間で共有されるデータを一元管理するために使用されます。コンポーネント間のデータ転送と対話は、Vuex の状態、ゲッター、ミューテーション、アクションなどを通じて実現されます。 </p><p>// store.js<br>import Vue from 'vue'<br>import Vuex from 'vuex'</p><p>Vue.use(Vuex)</p><p>export デフォルト new Vuex.Store({<br> 状態: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>message: 'Hello World!'</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> ゲッター: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>getMessage: state =&gt; state.message</pre><div class="contentsignin">ログイン後にコピー</div></div><p>},<br> 変異: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>updateMessage(state, newMessage) { state.message = newMessage }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}, <br> アクション: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>changeMessage({ commit }, payload) { commit('updateMessage', payload) }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br>})</p><p>// ParentComponent.vue<br><template><br> <div></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;child-component&gt;&lt;/child-component&gt; &lt;p&gt;父组件获取数据：{{message}}&lt;/p&gt; &lt;button @click=&quot;changeMessage&quot;&gt;更改数据&lt;/button&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div><p></div><br></template></p><p><script><br> import ChildComponent from './ChildComponent'<br> import {mapGetters, mapActions } from 'vuex'</p><p>デフォルトのエクスポート {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>components: { ChildComponent }, computed: { ...mapGetters(['getMessage']), message() { return this.getMessage } }, methods: { ...mapActions(['changeMessage']) }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br></script>

// ChildComponent.vue

<script><br> import {mapGetters } from 'vuex'</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>computed: { ...mapGetters(['getMessage']), message() { return this.getMessage } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>}<br></script>

上記は、Vue コンポーネント通信の一般的なデータ転送方法をいくつか示しています。各方法には、適用可能な独自のシナリオがあります。実際のニーズに応じて適切なものを選択してください。データ転送の方法。これらの方法を合理的に使用することで、コンポーネント間の柔軟かつ効率的な通信が実現され、開発効率とコード品質が向上します。

以上がVue コンポーネント通信のデータ転送方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。