Vueドキュメントでのコンポーネント親子値伝達関数の実装方法

Vue は人気のある JavaScript フレームワークであり、そのコンポーネント開発は、複雑なアプリケーションを開発する際のモジュール性の度合いを向上させ、コードの保守性とスケーラビリティを向上させるのに役立ちます。 Vue では、コンポーネント間のデータ転送は非常に一般的な要件であり、最も一般的なシナリオは親コンポーネントと子コンポーネント間のデータ転送です。このようなデータ転送を Vue で実装するには、親コンポーネントと子コンポーネント間の値の転送の実装方法を理解する必要があります。

Vue コンポーネントでは、親コンポーネントは同時に複数の子コンポーネントを持つことができます。親コンポーネントは子コンポーネントにデータを渡すことができます。これらのデータは、親コンポーネントのデータまたは関数の戻り値です。子コンポーネントを呼び出す親コンポーネントの値。具体的には、Vue では、コンポーネントの親子値転送を実装する方法がいくつかあります。

1. Props データ転送
   Vue では、子コンポーネントで props 属性を宣言し、次に Data を宣言できます。プロパティの形式で親コンポーネントから子コンポーネントに渡されます。子コンポーネントは、props 属性で宣言されたプロパティを使用してこのデータを受け取ることができます。

サンプルコード:

親コンポーネント:

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

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

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

子コンポーネント:

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

この例では、子コンポーネントで props を宣言しました。属性、その名前は msg 、タイプは String です。親コンポーネント内で子コンポーネントを使用する場合、v-bind ディレクティブを使用して、親コンポーネントの helloWorld 属性を子コンポーネントの msg 属性にバインドします。

2. 子コンポーネントは $emit イベントを通じて親コンポーネントにデータを渡します。
   Vue では、イベントをトリガーすることでデータを親コンポーネントに渡すことができます。子コンポーネントは $emit 関数を呼び出すことでカスタム イベントをトリガーでき、渡す必要のあるデータをイベント パラメーターとして親コンポーネントに渡すことができます。

サンプルコード:

親コンポーネント:

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

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

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

子コンポーネント:

<template>
  <div>
    <button @click="sendMessage">Click Me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello World!')
      }
    }
  }
</script>

この例では、子コンポーネントに A ボタンを追加しますボタンがクリックされると、子コンポーネントは sendMessage 関数を呼び出し、message-sent という名前のカスタム イベントをトリガーし、パラメーター 'Hello World!' を親コンポーネントに渡します。

3. ref 属性を通じてサブコンポーネントのインスタンスを取得する
   Vue では、サブコンポーネントのインスタンスに ref 属性を追加して取得し、このインスタンスのメソッドとプロパティを直接呼び出すことができます。 。

サンプルコード:

親コンポーネント:

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

子コンポーネント:

<template>
  <div>
    {{message}}
  </div>
</template>

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

この例では、子コンポーネントにデータを定義します属性メッセージ、および子コンポーネントのインスタンスは、親コンポーネントの ref 属性を通じて取得されます。ボタンをクリックすると、親コンポーネントは this.$refs.child を通じて子コンポーネントのインスタンスを取得し、そのコンポーネントの message プロパティに直接アクセスします。

概要:
上記は、Vue でコンポーネントの親子値の転送を実装する一般的な方法のいくつかです。このうち、Props は最も一般的に使用されるデータ送信方法であり、コンポーネント間のデータ転送の種類を明確にし、可読性と保守性が向上しますが、$emit イベントを通じて親コンポーネントにデータを送信する方法も適用できます。サブコンポーネント内で操作やデータを実行する必要があるが、props では実行できないシナリオに適しています。ref 属性を通じてサブコンポーネントのインスタンスを取得する方法は、親コンポーネントがサブコンポーネントのデータやデータを直接操作する必要がある状況に適しています。機能。

以上がVueドキュメントでのコンポーネント親子値伝達関数の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。