Vueドキュメントでの隣接成分値伝達関数の実装方法

Vue は、一般的なフロントエンド フレームワークとして、多くの場合、コンポーネント間の値転送関数を実装する必要があります。このうち、隣接するコンポーネントの値を転送する場合は、主にコンポーネントのメソッドを呼び出すことで実現されます。この記事では、Vueにおける隣接成分値伝達関数の実装方法を紹介します。

1. 親コンポーネントが子コンポーネントに値を渡す

Vue では、親コンポーネントの値は v-bind ディレクティブを通じて子コンポーネントにバインドされます。具体的な実装コードは次のとおりです。

親コンポーネント内:

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

子コンポーネント内:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

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

上記のコードは、親コンポーネント ## のデータを渡します。 #parentData v-bind:data 子コンポーネントの data 属性にバインドします。

2. 子コンポーネントは親コンポーネントに値を渡します

Vue では、子コンポーネントは

$emit メソッドを通じて親コンポーネントにイベントを送信する必要があります。親コンポーネントにイベントを登録し、子コンポーネントから送信されたデータをコールバック関数で処理します。具体的な実装コードは次のとおりです。

親コンポーネント内:

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

子コンポーネント内:

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

上記のコードでは、子コンポーネントは

を渡します。 v-on:click sendDataToParent メソッドをバインドし、メソッド内で $emit メソッド send-data を介して親コンポーネントにイベントを送信します。データを渡します Hello, Parent ! 。親コンポーネントで、イベント send-data のコールバック関数 handleChildData を v-on:send-data 経由で登録し、子の返却処理を行います。関数パラメータのコンポーネント。

3. 兄弟コンポーネント間での値の転送

兄弟コンポーネント間でデータを転送する場合、親コンポーネントを中間ブリッジとして使用する必要があります。具体的な実装コードは次のとおりです。

親コンポーネント内:

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

サブコンポーネント 1 内:

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

サブコンポーネント 2 内:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

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

上のコードでは、子コンポーネント 1 がイベント

update-data を親コンポーネントに送信し、データ Hello, Brother 2! を渡します。親コンポーネントはイベント をリッスンします。 v-on:update-data を実行し、関数内のデータ handleBrotherData を処理し、v-bind を通じて処理されたデータをサブコンポーネント 2 の data にバインドします。プロパティ内のデータ。

まとめると、Vue における隣接コンポーネントの値受け渡し関数の実装方法は、主に親コンポーネントと子コンポーネント間の値バインディングとイベント通信によって完了します。親コンポーネントは、兄弟コンポーネント間の中間ブリッジとして機能します。この方法はシンプルでわかりやすく、柔軟で便利であり、Vue における非常に重要なコンポーネント通信方法です。

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