値の転送を実現するために、2つの同じレベルのコンポーネントをVueで作成します。

Vue コンポーネントは接続されているため、コンポーネント間で値を渡す必要があるのは避けられません。親は v-bind を使用してカスタム属性を子コンポーネントにバインドし、props を使用してそれを受け取ります。

子は、親に対して @custom event = 'function' this.$emit('custom event', '送信するコンテンツ') を使用します。子コンポーネントは、$emit を介して親コンポーネントの関数をトリガーしてこれを実現します。ただし、同じレベルの 2 つのコンポーネントは、このようにして互いに値を渡します。

<div id='アプリ'>
 <子供1></子供1>
 <子供2></子供2>
</div>
<スクリプト>
  var children1 = {};
  var children2 = {};
 var vm = 新しい Vue({
  el:'#app',
  コンポーネント:{
   子供1,
   子供2
  }
 })
</スクリプト>

ここで、children1コンポーネントのデータをchildren2コンポーネントに渡す必要があります。

vueインスタンスでは主に$on()と$emit()を使用します

 <div id='アプリ'>
  <子供1></子供1>
  <子供2></子供2>
 </div>
 <スクリプト>
     var Event = new Vue({}); // 値の転送の媒体として使用される vue インスタンスを作成します var children1 = {
   テンプレート:`
    <div>
     <button @click='send'>クリックすると、children2 コンポーネントにデータが送信されます</button>
    </div>
   `、
   データ（）{
    戻る {
     メッセージ:「子供にデータを送信したい2」
    }
   },
   方法:{
    送信（）{ 
     イベント.$emit('go',this.msg) 
    }
   }
  };
   var children2 = {
   テンプレート:`
    <div>
     <h2>children1 コンポーネントから受信した値: {{msg1}}</h2>  
    </div>
   `、
   データ（）{
    戻る {
     メッセージ1:''
    }
   },
   作成された(){
    Event.$on('go',(v) => { // これは矢印関数を使用する必要があるため
     this.msg1 = v;
    })
   }
  };
  var vm = 新しい Vue({
   el:'#app',
   コンポーネント:{
    子供1,
    子供2
   }
  })
</スクリプト>

chilren1コンポーネントはEvent.$emit()を使用してデータを送信します
chilren2コンポーネントはEevent.$on()を使用してデータを受信します

これで、2 つの Vue ピアコンポーネント間の値転送の実装に関するこの記事は終了です。Vue ピアコンポーネントの値転送に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: