ホームページ  >  記事  >  ウェブフロントエンド  >  vuejsでデータを渡す方法は何ですか

vuejsでデータを渡す方法は何ですか

青灯夜游
青灯夜游オリジナル
2021-09-08 14:15:453303ブラウズ

送信方法: 1. 親コンポーネントは props を使用して子コンポーネントにデータを転送します。 2. 子コンポーネントはイベントを通じて親コンポーネントにデータを転送します。 3. ルーティングを使用してデータを転送します。 4. localStorage を使用します。または sessionStorage を使用してデータを保存し、getItem を使用してデータを取得します。 5. Vuex を使用してデータを転送します。

vuejsでデータを渡す方法は何ですか

このチュートリアルの動作環境: Windows 7 システム、vue バージョン 2.9.6、DELL G3 コンピューター。

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

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

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

サブコンポーネント

サブコンポーネントは、から ロゴを取得する必要があります。親コンポーネント の値には、 props: ['logo']

# を使用する必要があります。

#親コンポーネント

##2. 子コンポーネントは親に値を渡しますコンポーネント

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

サブコンポーネント:

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

:

##getUser

メソッドのパラメータ

msg はサブコンポーネントから渡されるパラメータです。 username3 .Route値の受け渡し

使用すると、作成されたライフサイクルで値が割り当てられます。

4. localStorage または を渡します。 sessionStorageデータを保存するには

##5 。 Vuex

アプリケーションが複雑な場合は、vuevuex を使用することをお勧めします。公式ウェブサイトで推奨されています。

#https://vuex.vuejs.org/zh-cn/getting-started.html

関連推奨事項: "

vue.js チュートリアル

"

以上がvuejsでデータを渡す方法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。