Vue データ転送の実装手順の詳細な説明

php中世界最好的语言
リリース: 2018-04-27 16:11:46
オリジナル
2331 人が閲覧しました

今回は、vue のデータ転送を実装する手順について詳しく説明します。vue のデータ転送を実装する際の 注意事項 は何ですか?実際のケースを見てみましょう。

コンポーネントは Vue.js の最も強力な機能です。コンポーネントは再利用可能なコードをカプセル化し、異なるオブジェクトを渡すことでコンポーネントの再利用を実現できますが、コンポーネントの値の転送は解決すべき問題になります。

1. 親コンポーネントが子コンポーネントに値を渡す

コンポーネントインスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレート内で直接参照できないことを意味します。子コンポーネントに親コンポーネントのデータを使用させるには、子コンポーネントの props オプションを渡す必要があります。

サブコンポーネント:

子组件需要从父组件获取 logo 的值,就需要使用 props: ['logo']

サブコンポーネントが親コンポーネントからロゴの値を取得する必要がある場合は、小道具を使用する必要があります: ['logo']

Vue データ転送の実装手順の詳細な説明

親コンポーネント:

Vue データ転送の実装手順の詳細な説明

2. サブコンポーネント 親コンポーネントに値を渡す

子コンポーネントは主に

イベントを通じて親コンポーネントにデータを渡します。

サブコンポーネント:

Vue データ転送の実装手順の詳細な説明Vue データ転送の実装手順の詳細な説明

ここで、transferUser はカスタム イベントであり、this.username はこのイベントを通じて親コンポーネントに渡されます。

親コンポーネント:

Vue データ転送の実装手順の詳細な説明Vue データ転送の実装手順の詳細な説明

getUserメソッドのパラメータmsgは、子コンポーネントから渡されるパラメータのユーザー名です

3.Routeパス値

Vue データ転送の実装手順の詳細な説明Vue データ転送の実装手順の詳細な説明使用時、

ライフ サイクル

の割り当てが作成されました。

Vue データ転送の実装手順の詳細な説明

4. localStorage または

sessionStorage を介してデータを保存する

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、その他の情報に注意してください。関連記事はphp中国語サイトにあります! Vue データ転送の実装手順の詳細な説明

推奨読書:

vue での ajax リクエストと axios パッケージの完璧な処理


jquery でアップロードされたファイルの詳細を取得する

以上がVue データ転送の実装手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!