vue が親モジュールの値を更新する方法の詳細な説明

Vue は、データ駆動型のビューを中核とする人気のあるフロントエンド フレームワークです。 Vue では、親コンポーネントと子コンポーネント間でデータを共有することが一般的なニーズです。子コンポーネントの値が更新されたときに、親コンポーネントの値を更新する必要がある場合は、Vue のイベント システムを使用する必要があります。

Vue のイベント システムは、コンポーネント間の通信メカニズムを提供します。コンポーネントは $emit メソッドを通じてカスタム イベントを送出し、親コンポーネントはこのイベントをリッスンしてデータを更新できます。

次に、vue が親モジュールの値を更新する方法を詳しく紹介します。

1. props を使用してデータを渡す

Vue のコンポーネント間の通信メカニズムでは、親コンポーネントは props を介して子コンポーネントにデータを渡し、子コンポーネントでは $emit メソッドが使用されます。親コンポーネントのイベントをトリガーします。

親コンポーネントでデータを定義し、props を介して子コンポーネントに渡します。コードは次のとおりです:

Vue.component('child', {
  props: ['message'],
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$emit('update:message', 'update message from child component')
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  mounted() {
    this.$on('update:message', message => {
      this.message = message
    })
  }
})

子コンポーネントでメソッドchangeMes​​sageを定義します。子コンポーネントがをクリックすると、$emit メソッドがトリガーされ、更新する必要があるデータ コンテンツが渡されます。

子コンポーネントによってトリガーされるイベントをリッスンするために、親コンポーネントにマウントされたフック関数を定義します。子コンポーネントが $emit メソッドをトリガーすると、親コンポーネントのイベント ハンドラーが呼び出され、データの内容が更新されます。

2. $parent を使用して親コンポーネントにアクセスする

Vue は、props を使用してデータを渡すことに加えて、$parent を通じて親コンポーネントにアクセスする方法も提供します。 $parent を介して親コンポーネントにアクセスすると、親コンポーネントのデータ コンテンツを直接変更できます。

以下はコード例です:

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$parent.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

子コンポーネントの this.$parent を通じて親コンポーネントにアクセスし、親コンポーネントのデータ コンテンツを直接変更します。

ただし、この方法を使用すると密結合の問題が発生するため、正式なプロジェクトでの使用はお勧めできません。

3. $root を使用してルート コンポーネントにアクセスします

Vue では、$root を使用してルート インスタンスにアクセスすることもできます。各 Vue インスタンスには対応するルート インスタンスがあるため、$root を使用してルート インスタンス内のデータ コンテンツにアクセスできます。

以下はコード例です:

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$root.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

サブコンポーネントの this.$root を通じてルート インスタンスにアクセスし、ルート インスタンスのデータ コンテンツを直接変更します。

ただし、この方法を使用すると密結合の問題も発生するため、正式なプロジェクトでの使用はお勧めできません。

4. 概要

Vue では、子コンポーネントは $emit メソッドと $on メソッドを通じて親コンポーネントにデータを渡すことができ、親コンポーネントは props を通じて子コンポーネントにデータを渡すことができます。および v-model.data。同時に、親コンポーネントとルート インスタンスのデータ コンテンツには、$parent メソッドと $root メソッドを通じてアクセスできますが、正式なプロジェクトで使用することはお勧めできません。

上記では、Vue が親モジュールの値を更新するためのいくつかの方法を紹介しましたが、開発者はさまざまな特定の状況に応じて適切な方法を選択できます。

以上がvue が親モジュールの値を更新する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。