Vue.js がコンポーネントを分割する方法

今回は、Vue.js で ピースをグループ化する方法について説明します。この記事は、優れた分析を提供します。

一部の共通ページでは、このページが完成した後、全員が一緒に座ってコードを入力できますが、特に

モジュラー 開発に適したいくつかの フレームワーク を使用して、他のページを作成することができます。 , これでは非常に非効率的に見えるので、Vue でコンポーネントがどのように分割されているかを簡単に見ていきます。

まとめると、分割方法は2つあります。 1つは、ページ上の機能ブロック、select、pagenation、および実装に多くのコードが必要な部分を抽出することができます。それらをまとめたり、分類したりできます。ページ領域、ヘッダー、フッター、サイドバーに応じて分割する方法もあります。Vue コンポーネントはコンポーネントを持った後、どのように実装されますか?

APP.vueはプロジェクトの入り口であり、分割したコンポーネントも

オブジェクトです。APP.vueでは各コンポーネントをインポートするためにimportを使用します。 Import、headerは右側のheader.vueファイルを参照しています。 もちろん、es6のコンポーネント化を使用する必要がない場合は、他のrequireを使用して記述する必要があります。これら 2 つのコンポーネントが app.vue に導入されるだけの場合は、パッケージ化プロセスを実行します。 内部では、これら 2 つのコンポーネントはまだページ上で利用できません。

Vue では、このコンポーネントはコンポーネントを通じて登録され、インポートされる必要があります これを入れて、テンプレート レベルで

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

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

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

関連書籍:

HTTP/2サーバープッシュについて

nvmのノードの異なるバージョンを管理する方法

CheckBoxの選択が空かどうかを判断する方法

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