vue.js の分割コンポーネントの詳細な紹介

今回は、Vue.js で コンポーネントをグループ化する方法を説明します。Vue.js でコンポーネントを分割するための 注意事項 とは何ですか? 一部の共通ページでは、このページが完成した後、全員が一緒に座ってコードを入力できますが、特に

モジュラー

開発に適したいくつかの フレームワーク を使用して、他のページを作成することができます。 , これでは非常に非効率的に見えるので、Vue でコンポーネントがどのように分割されているかを簡単に見ていきます。 まとめると、分割する方法は 2 つあります。1 つは、ページ上の機能ブロック、選択、ページネーション、および実装に多くのコードが必要な部分を抽出して、それらをまとめたり、分類したりする方法です。ページ領域、ヘッダー、フッター、サイドバーに応じて分割する方法もあります。Vue コンポーネントはコンポーネントを持った後、どのように実装されますか?

Vue コンポーネントはどのように実装されますか?まず、

ファイル システム

がどのようなものかを見てみましょう APP.vue はプロジェクトの入り口であり、分割したコンポーネントもオブジェクトです。APP.vue では、各コンポーネントをインポートするために import を使用します。 Import、headerは右側のheader.vueファイルを参照しています。 もちろん、es6のコンポーネント化を使用する必要がない場合は、他の

require

を使用して記述する必要があります。これら 2 つのコンポーネントが app.vue に導入されるだけの場合は、パッケージ化プロセスを実行します。 内部では、これら 2 つのコンポーネントはまだページ上で利用できません。 Vue では、このコンポーネントはコンポーネントを通じて登録する必要があり、インポートされた これを入れて、テンプレート レベルで

を記述します。レンダリング後、テンプレート レベルは header.vue と footer.vue の内容になります。注意すべき点は、Vue を使用する前に登録する必要があるということです

概念に従って、Vue コンポーネント間の通信を紹介します。まず、header.vue ファイル内のコードを登録する必要があります。その中にユーザー名であるデータがあると仮定して、メソッドは dothis です。は属性 props であり、msg が登録されています。app.vue が header コンポーネントを呼び出すとき、header 属性に msg を直接書き込み、app.vue 内のデータを header.vue に渡すことができます。これはすべて Vue のメカニズムによって実装されています。 . header.vueにここにmsgが書かれていないと属性を取得できません。

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

推奨読書:

Vueファミリーバケットプロジェクトの実践の詳細な説明

ネイティブJS非同期リクエストでAjaxを実装する方法

Vuex状態管理の使用方法

テーブル内のすべてを選択し、 vue2.0 反対選挙

以上がvue.js の分割コンポーネントの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。