今回は、Vue コンポーネント通信バスの使い方について説明します。 Vue コンポーネント通信バスを使用する際の 注意事項 については、次のとおりです。
$dispatch と $broadcast は vue2.0 で非推奨になりました。公式ドキュメントに記載されている説明は次のとおりです: なぜなら、コンポーネントツリー構造に基づく 公式に推奨される 実際、この非親子コンポーネント通信に関するデモは、$dispatch と $broadcast の移行ドキュメントに隠されています。興味のある方はクリックしてご覧ください。ドキュメント内の提案は次のとおりです: $dispatch と $broadcast をアップグレードする最も簡単な方法は、イベント ハブを使用して、コンポーネントがコンポーネント ツリー内のどこにあるかに関係なく、コンポーネントが自由に通信できるようにすることです。 Vue インスタンスはイベント ディスパッチ インターフェイス を実装しているため、空の Vue インスタンスをインスタンス化することでこれを実現できます。 この集中イベント
ミドルウェア は Bus です。私はバスをグローバルに定義することに慣れています:
りぃ
次に、コンポーネント内で $emit、$on、$off を使用して、リスニング イベントをそれぞれ配布、監視、キャンセルできます。 イベントを配布するコンポーネントvar eventBus = { install(Vue,options) { Vue.prototype.$bus = vue } }; Vue.use(eventBus);
// ... methods: { todo: function () { this.$bus.$emit('todoSth', params); //params是传递的参数 //... } }
// ... created() { this.$bus.$on('todoSth', (params) => { //获取传递的参数并进行操作 //todo something }) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy () { this.$bus.$off('todoSth'); },
Swiper プラグインで矢印ボタンを切り替える方法
以上がVueコンポーネント通信バスの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。