Vue データ転送テクニックとは何ですか?-jsチュートリアル-php.cn

Vue データ転送テクニックとは何ですか?

php中世界最好的语言

リリース： 2018-05-09 11:42:19

オリジナル

1228 人が閲覧しました

今回は、vue データ転送のテクニックと、vue データ転送の注意事項についてお届けします。実際の事例を見てみましょう。

はじめに

最近、vueのeventBusに関する多くの質問に遭遇しましたが、テクノロジーの選択を決定しているときに、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
}

ログイン後にコピー

2. 子コンポーネント

// props
props: ['info']
// 向上传值，某个方法中使用
this.$emit('update', 'got')

ログイン後にコピー

親は値を子に渡します -->props 子は値を親に渡します -->子コンポーネントは親コンポーネントとサブコンポーネントで定義された event コールバックがこのイベントをトリガーします。親コンポーネントに渡された props を子コンポーネントで直接変更することは推奨されないため、カスタムイベントを使用する必要があります。

制限事項

親子コンポーネント。

eventBus

demo

busはすべてインポートされたバスインスタンスです

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)

ログイン後にコピー

本質はイベントバインディングのメディアとして機能するvueインスタンスであることがわかります。データ通信のあらゆる場面でご利用ください。

2 つ (複数) の当事者が同じ名前のイベントを使用して通信します。

問題

$emit は $on でなければなりません。そうしないとイベントは監視されません。これは、コンポーネントに対して特定の同時要件があることを意味します。 (注: routing が切り替えられると、新しいルーティングコンポーネントが最初に作成され、次に古いルーティングコンポーネントが破棄されます。場合によっては、これら 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 アーキテクチャを理解して使用することはそれほど難しくありません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

vue-router でクエリ動的パラメータを渡す手順は何ですか?

vue プロセスからローカル開発環境にアクセスできない問題に対処する方法storejsで取得したデータ

以上がVue データ転送テクニックとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。