Vue コンポーネント間で値を転送する 2 つの方法

ここに画像の説明を挿入します

Vue では、コンポーネント間で値を転送するのが一般的な操作ですが、通常、データを転送するには props とイベント (イベントバス) の 2 つの方法があります。以下では、これら 2 つの方法について詳しく紹介します。

1. Props を介してデータを渡す

Props は、親コンポーネントから子コンポーネントにデータを渡す方法です。子コンポーネントで props を宣言すると、親コンポーネントが子コンポーネントにデータを渡すことができます。

親コンポーネントはデータを子コンポーネントに渡します。

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

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

export default {
      
      
  components: {
      
      
    ChildComponent
  },
  data() {
      
      
    return {
      
      
      parentMessage: '我是IT小辉同学'
    };
  }
};
</script>

子コンポーネントは Props を受け取り、使用します。

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

<script>
export default {
      
      
  props: {
      
      
    message: String // 指定 props 的类型
  }
};
</script>

この例では、messageタイプが文字列として指定されているプロップです。親コンポーネントは:message="parentMessage"データを子コンポーネントに渡します。もちろん、messagel 型を指定numberすることもできます。このとき、渡した値は正常に受け取られますが、コンソールに警告が表示されるので、このように値を渡すことができます! もちろん、データ型を制限する必要がない場合は、次のように単純な受信を使用してパラメータを直接受け取ることができます。

props:[name,age,sex]

同時に、パラメータが必要かどうかを制限することもできます。これは、次のように、より複雑なパラメータ転送制限です。

 props: {
    
    
    message: {
    
    
    tyoe: String,
    required: true
    }
  }

2. イベントを介してデータを渡す (イベントバス)

イベントバスは、Vue インスタンスを通じてイベントを通信する方法であり、異なるコンポーネント間の分離された通信を可能にします。グローバル Vue インスタンスをイベントセンターとして使用し、通信する必要があるコンポーネントでイベントをトリガーしてリッスンすることができます。

グローバルイベントバスを作成します。

// EventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

送信コンポーネントでイベントをトリガーします。

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
import {
      
       EventBus } from './EventBus.js';

export default {
      
      
  methods: {
      
      
    sendMessage() {
      
      
      EventBus.$emit('message-sent', '你好啊，我是小辉同学！');
    }
  }
};
</script>

受信側コンポーネントでイベントをリッスンします。

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

<script>
import {
      
       EventBus } from './EventBus.js';

export default {
      
      
  data() {
      
      
    return {
      
      
      message: ''
    };
  },
  mounted() {
      
      
    EventBus.$on('message-sent', message => {
      
      
      this.message = message;
    });
  }
};
</script>

この例では、イベントバスを通じて、サブコンポーネントはグローバルイベントセンターにイベントを送信でき、別のコンポーネントはイベントがトリガーされたときに対応する操作をリッスンして実行できます。

どちらのメソッドもデータの受け渡しに使用できますが、親コンポーネントと子コンポーネントの間でデータを受け渡すには Props を使用する方が明確で保守しやすいため、イベントバスを使用して複数のコンポーネント間の通信や解決を処理できるためお勧めします。カップリングはもっとカジュアルに！