ホームページ > 記事 > ウェブフロントエンド > Vue データ転送 -- 特別な実装スキルを持っています
この記事では主に、vue のデータ送信のための特別な並べ替えテクニックを紹介します。必要な方は参考にしてください。
私は最近、vue のイベントバスに関するテクノロジーの選択を決定しているときに、さらに多くの問題に遭遇しました。 vuexとeventBusの使用範囲についても質問されました。それで、それを書き留めてください。同時に、特別な実装ソリューションもあります。 データ転送方法には、vuex、props、eventBus、special eventsBus がいくつかあります。
vuex
導入しないと、データ量や複雑さがそれに見合っていないと見下されるだけです。
props
demo
親コンポーネントと子コンポーネントは値を渡します、公式API、デモを書くだけです。
1. 親コンポーネント<son :info="info" @update="updateHandler"/>
// data
info: 'sendToSon'
// methods
updateHandler (newVal) {
this.info = newVal
}
// props
props: ['info']
// 向上传值,某个方法中使用
this.$emit('update', 'got')
子コンポーネントが親コンポーネントに値を渡す --> サブコンポーネントバインディング A特定のイベント コールバックが親コンポーネントで定義されており、子コンポーネントがこのイベントをトリガーします。 親コンポーネントに渡された props を子コンポーネントで直接変更することは推奨されないため、カスタム イベントを使用する必要があります。
制限事項
親子コンポーネント。
eventBusdemobusはすべてインポートされたバスインスタンスです
// bus const bus = new Vue() // 数据接收组件 // 当前组件接收值则 bus.$on('event1', (val)=>{}) // 数据发出组件 // 当前组件发出值则 bus.$emit('event1', val)
本質はイベントバインディングのメディアとして機能するvueインスタンスであることがわかります。 データ通信のあらゆる場面でご利用ください。
2 つ (複数) の当事者が同じ名前のイベントを使用して通信します。
問題
$emit は $on でなければなりません。そうしないとイベントは監視されません。これは、コンポーネントに対して特定の同時要件があることを意味します。 (注: ルーティングが切り替わると、最初に新しいルーティング コンポーネントが作成され、次に古いルーティング コンポーネントが破棄されます。場合によっては、これら 2 つのライフ サイクルを別々に記述することができます。この質問を参照してください)。コンポーネントが破棄された後、
$on は自動的にバインド解除されません。同じコンポーネントが複数回生成された場合、イベントは複数回バインドされ、$emit が 1 回発生するため、複数の応答が発生し、追加の処理が必要になります。 。
データは「長期」データではないため、$emit 後にのみ有効になります。
では、より適切な解決策はあるのでしょうか?
特別イベントバス?
デモ
まずコードを見てみましょう、オンラインコードです。バスはすべてインポートされたバス インスタンスです。
// bus const bus = new Vue({ data () { return { // 定义数据 val1: '' } }, created () { // 绑定监听 this.$on('updateData1', (val)=>{ this.val1 = val }) } }) // 数据发出组件 import bus from 'xx/bus' // 触发在bus中已经绑定好的事件 bus.$emit('update1', '123') // 数据接收组件 {{val1}} // 使用computed接收数据 computed () { val1 () { // 依赖并返回bus中的val1 return bus.val1 } }
は異なります
オーソドックスなeventBusはイベントをバインドしてトリガーするためにのみ使用され、データを気にせず、データと交差しません。このソリューションでは、データをバス インスタンスに直接追加する手順が 1 つ追加されます。また、イベント監視とデータ追加は事前に定義する必要があります。
データ受信側は、$on を使用してデータの変更を学習するのではなく、計算された属性の特性を通じて受動的にデータの変更を受信します。
通信コンポーネントは同時に存在する必要がありますか?データはバス上に保存されるため、要件はありません。 複数回バインドしますか?バインディング モニターはすべてバス上にあり、繰り返しバインドされることはありません。
データは $emit 後にのみ利用可能ですか?計算されたプロパティを使用すると、イベントを再度トリガーすることなく、バスに保存されている値を直接読み取ることができます。
議論してください
計算されたプロパティが使用される理由実際、それが data1:bus.data1 などのデータに直接追加できない理由であるはずです。別のコードであるオンライン コードを見てみましょう。 バスを
data () { return { // 多一层结构 val: { result: 0 } } }, created () { this.$on('update1', val => { console.log('触发1', i1++) this.val.result = val }) }
に変更します。 データ受信コンポーネントが
// template data中获取直接修改值:{{dataResult}} data中获取直接修改值的父层:{{dataVal}} computed中依赖直接修改值:{{computedResult}} // js data () { return { // 获取直接修改值 dataResult: bus.val.result, // 获取直接修改值的父层 dataVal: bus.val } }, computed: { computedResult () { // 依赖直接修改值 return bus.val.result } }
に変更されます。値を直接変更するデータはデータ内で動的に応答できないことがわかります。
イベントを使用する理由
実際、を使わずに値を直接割り当てることが可能です。
$emit
触发,使用 bus.val = 1
vuexの簡易版
実は、このeventBusはvuexの簡易版です。 vue のドキュメントには次の一節があります: コンポーネントは、ストア インスタンスに属する状態を直接変更することはできませんが、ストアに変更を通知するイベントを配布 (ディスパッチ) するアクションを実行する必要があります。 ついに Flux アーキテクチャに到達しました。この契約の利点は、ストア内で発生するすべての状態変化を記録できることです。
storeはバスインスタンスに対応し、stateはデータに対応し、actionはイベントに対応し、dispatchは$emitに対応します。 同時に、vuex のコンポーネントがデータを取得する方法は計算されたプロパティを通じて行われるため、実際、vuex と Flux アーキテクチャを理解して使用することはそれほど難しくありません。
上記は私があなたのためにまとめたものです。
関連記事:
Ajaxテクノロジーに基づいたプログレスバー付きのファイルアップロードの実装AjaxのreadyStateとステータスに関連する問題について話し合う
$.Ajax() メソッドパラメータの包括的な分析 (画像とテキストのチュートリアル)
以上がVue データ転送 -- 特別な実装スキルを持っていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。