コンポーネント内のデータとコンポーネント パラメーターのプロパティを使用して Vue でデータ転送を実現する方法

Vue は非常に人気のあるフロントエンド開発フレームワークであり、コンポーネントは非常に重要な構成要素です。 Vue では、コンポーネント内のデータとコンポーネント パラメーターのプロパティをうまく組み合わせて使用​​して、データ転送を実現できます。

Vue コンポーネントでは、データはコンポーネント内の状態データです。コンポーネント内のすべてのメソッドからアクセスおよび変更できます。コンポーネント内でのデータの使用は、次の方法で宣言できます。

  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }

この例では、message というデータを宣言します。このデータは、コンポーネント内のすべてのメソッドでアクセスおよび変更できます。

しかし、コンポーネント間でデータを共有したい場合はどうすればよいでしょうか?現時点では、コンポーネント パラメーターの小道具を使用してデータを渡すことができます。 Props を使用すると、コンポーネント間でデータを渡すことができます。

次の例は、コンポーネント内で props を使用してデータを渡す方法を示しています:

  // 父组件
  <template>
    <div>
      <child-component message="Hello Vue!"></child-component>
    </div>
  </template>

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

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

この例では、親コンポーネントは、message という名前の props を値 を持つ子コンポーネントに渡します。 「こんにちは、ビュー！」。子コンポーネントのテンプレートでは、{{message}} を使用してこの props の値を表示します。

しかし、サブコンポーネント内のこのプロパティの値を変更したい場合はどうすればよいでしょうか?現時点では、Vue の .sync 修飾子を使用して props を渡し、双方向バインディングを実装できます:

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

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

  // 子组件
  <template>
    <div>
      <input v-model="message">
      <p>{{ message }}</p>
    </div>
  </template>

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

この例では、 を使用して、親コンポーネントで message という名前の props を渡します。双方向バインディングを実装します。子コンポーネントでは、v-model を使用してメッセージを入力にバインドし、コンポーネント内でその値を変更します。

ただし、子コンポーネントの props の値を変更する場合は、update:propName の親コンポーネント イベントも定義し、$emit を使用して子コンポーネントでこのイベントをトリガーする必要があることに注意してください。成分。この例では、update:message という名前のイベントを定義し、子コンポーネントで $emit を使用して親コンポーネントのメッセージの値を更新します。

要約すると、コンポーネント内のデータとコンポーネント パラメーター props を通じて、Vue でコンポーネント間のデータ転送を簡単に実現できます。これを正しく使用すると、コンポーネント間でのデータの受け渡しが非常に簡単になり、コードの保守が容易になります。

以上がコンポーネント内のデータとコンポーネント パラメーターのプロパティを使用して Vue でデータ転送を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。