Vue コンポーネント通信におけるプログラミングのヒントと注意事項-Vue.js-php.cn

Vue コンポーネント通信におけるプログラミングのヒントと注意事項

WBOY

リリース： 2023-07-18 20:02:01

オリジナル

1457 人が閲覧しました

Vue コンポーネント通信のプログラミングのヒントと注意事項

Vue.js は人気のある JavaScript フレームワークです。そのシンプルさ、使いやすさ、強力なデータバインディング機能により、ますます多くの開発者がそれを選択しています。Vue を使用して、フロントエンドアプリケーションを開発します。 Vue の開発プロセスにおいて、コンポーネントの通信は非常に重要なトピックです。コンポーネント間通信を適切に行うと、開発効率が向上し、コードの保守性が向上します。この記事では、Vue コンポーネント間通信におけるプログラミングスキルと注意点を紹介します。

1. 親子コンポーネントの通信
Vue では、親子コンポーネントの通信が最も一般的な方法です。親コンポーネントは props を通じて子コンポーネントにデータを渡し、子コンポーネントはイベントを通じて親コンポーネントにデータを渡します。

1. プロパティを使用してデータを渡す

親コンポーネントは、プロパティを介して子コンポーネントにデータを渡すことができます。子コンポーネントは、親コンポーネントから渡されたデータを受信し、レンダリングやその他の操作を実行できます。

// 父组件
<template>
  <div>
    <child-component :message="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

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

ログイン後にコピー

上記のコードでは、親コンポーネントは props を通じて message を子コンポーネントに渡し、子コンポーネントは props オプションを使用して受け取ったプロパティを宣言します。

2. イベントを使用してデータを渡す

子コンポーネントは、$emit メソッドを通じてカスタムイベントをトリガーし、データを親コンポーネントに渡すことができます。親コンポーネントは、v-on を通じて子コンポーネントによってトリガーされたイベントをリッスンし、渡されたデータを取得できます。

// 子组件
<template>
  <button @click="handleClick">点击我触发事件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('my-event', 'Hello Parent!')
    }
  }
}
</script>

// 父组件
<template>
  <div>
    <child-component @my-event="handleEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleEvent(message) {
      console.log(message)
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、子コンポーネントは this.$emit メソッドを通じて my-event イベントをトリガーし、データ 'Hello Parent を送信します。 !' 親コンポーネントに渡されます。親コンポーネントは、v-on を使用して my-event イベントをリッスンし、対応するメソッドを呼び出してイベントを処理します。

2. 非親子コンポーネント通信
親子コンポーネント通信に加えて、場合によっては、非親子コンポーネント間の通信も必要になります。一般的に使用される方法には、Vue インスタンスを中央イベントバスとして使用する方法や、状態管理に Vuex を使用する方法が含まれます。

1. Vue インスタンスを中央イベントバスとして使用する

Vue インスタンスを中央イベントバスとして作成できます。サブコンポーネントはこのインスタンスを通じてイベントをトリガーし、他のコンポーネントはリッスンすることでデータを受信します。イベント。

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 子组件A
<template>
  <button @click="handleClick">点击我触发事件</button>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  methods: {
    handleClick() {
      EventBus.$emit('my-event', 'Hello!')
    }
  }
}
</script>

// 子组件B
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { EventBus } from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    EventBus.$on('my-event', (message) => { 
      this.message = message;
    })
  }
}
</script>

ログイン後にコピー

上記のコードでは、EventBus という名前の Vue インスタンスを作成し、このインスタンスを通じてサブコンポーネント間の通信を実装しました。サブコンポーネント A は EventBus.$emit を通じてカスタムイベント my-event をトリガーし、サブコンポーネント B は EventBus.$on を通じて my-event# をリッスンします。 ##イベントと更新データ。

2. 状態管理に Vuex を使用する

Vuex は、Vue が公式に提供する状態管理ライブラリです。 Vuex を使用すると、アプリケーションの状態を管理し、コンポーネント間の通信を実装できます。

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message;
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('setMessage', message);
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});

// 子组件A
<template>
  <button @click="handleClick">点击我触发事件</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['updateMessage']),
    handleClick() {
      this.updateMessage('Hello Vuex!');
    }
  }
}
</script>

// 子组件B
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getMessage']),
    message() {
      return this.getMessage;
    }
  }
}
</script>

ログイン後にコピー

上記のコードでは、

Vuex を使用して、state、mutations、# を含む store を作成します。 ##アクションとゲッター。サブコンポーネント A は、mapActions補助関数を通じて updateMessage メソッドを呼び出すことにより、message の値を更新します。サブコンポーネント B は、mapGetters 補助関数を通じて message の値を取得します。 3. 注意事項

計算プロパティを上手に活用する: Vue では、計算プロパティは非常に便利な機能です。計算された属性を使用すると、テンプレートに複雑な式を記述することを回避でき、複数のデータ属性の計算結果をキャッシュしてパフォーマンスを向上させることもできます。

プロパティを直接変更しないようにしてください。Vue では、プロパティは読み取り専用なので、プロパティの値を直接変更しないでください。サブコンポーネント内の props の値を変更する必要がある場合は、それをサブコンポーネントのデータ属性に変換し、サブコンポーネント内で変更する必要があります。変更した値を親コンポーネントに渡す必要がある場合は、emit イベントを使用できます。
$refs を使用してサブコンポーネントのインスタンスを取得する: シナリオによっては、親コンポーネント内のサブコンポーネントのインスタンスを取得する必要がある場合、$refs を使用できます。子コンポーネントに ref 属性を追加すると、親コンポーネントの this.$refs を通じて子コンポーネントのインスタンスを取得できます。
概要

Vue コンポーネント通信では、親子コンポーネント通信と非親子コンポーネント通信の 2 つの最も一般的な方法があります。親子コンポーネントの通信では、props やイベントを介したデータ転送と対話を実現できます。非親子コンポーネント通信は、中央イベントバスとして Vue インスタンスを作成するか、状態管理に Vuex を使用することによって実現できます。 Vue コンポーネントの通信コードを記述するときは、計算されたプロパティを有効に活用し、props を直接変更することを避け、$refs を使用してサブコンポーネントのインスタンスを取得したり、開発効率とコードの保守性を向上させるその他のテクニックを使用したりする必要があります。

以上がVue コンポーネント通信におけるプログラミングのヒントと注意事項の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。