Vue の非親子コンポーネントでの値転送とイベント バス (eventbus) の使用の概要

この記事では、Vue の非親子コンポーネントでの値の転送とイベント バス (eventbus) の使用について紹介します。必要な友人はそれを参照できます。 、お役に立てば幸いです。

まず、イベント バスとは何かについて説明します。これは実際にはサブスクリプション パブリッシャー モデルです。たとえば、このオブジェクトには 2 つのメソッドがあります。 1 つはオン (リスニング、つまりサブスクリプション)、もう 1 つはエミット (トリガー、つまりパブリッシュ) です。on メソッドを通じてイベントをリッスンし、エミットを使用してイベントをトリガーし、同時にコールバックを呼び出します。関数をオンにして、イベント トリガーを完了します。

これは言語とは関係のないデザイン パターンです。

サブスクリプション パブリッシャー パターンが何であるかわからない場合は、こちらをお読みください。この記事 JavaScript デザイン パターン - オブザーバー パターン (パブリッシャー/サブスクライバー モデル)

実際の開発において、最も厄介なことは、イベント バスを使用する場合、さまざまなコンポーネント間の値の転送の問題であることがよくあります。非常に単純です;

vue がインスタンス化された後、イベント バス オブジェクトとして機能する機能があることは誰もが知っています。 $emit と $on という 2 つのメソッドがあります。

vue ドキュメントでは、$emit が現在のインスタンスでイベントをトリガーし、追加のパラメーターがリスナー コールバックに渡されることが明確に示されています。

#vue のバス機能を使用するには、最大でもそれしか開発できません。サブコンポーネントから親コンポーネントにトリガーされますが、親以外のコンポーネントと子コンポーネントの間で値を渡すことはできません。

したがって、現時点では、マウントできるようにするグローバル イベント バス オブジェクトが必要です。イベントのリスニングとイベントのトリガー;

たとえば、子コンポーネントが親コンポーネントに値を渡すことは非常に簡単です。ここでは説明しません#。 ##

// 子组件中
<template>
  <div>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 如果传多个值就用逗号隔开 a, b, c
        this.$emit('fromChild', this.child)
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事件
    <child @fromChild="onFromChild"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
        this.name = data
      }
    }
  }
</script>

グローバル イベント バス オブジェクトを実装するいくつかの方法

一般的な考え方は次のとおりです。 : エントリ ファイルである main.js で、vue のプロトタイプにバス オブジェクトを追加します。

具体的な実装方法は次のとおりです。

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

// bus.js文件
import Vue from 'vue'
export default new Vue()

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

ログイン後にコピー

コンポーネント B

// 组件B， 触发事件send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>

ログイン後にコピー

以上がVue の非親子コンポーネントでの値転送とイベント バス (eventbus) の使用の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。