Vue.jsでコンポーネントを分割する実装方法の紹介

一部の一般的なページでは、このページが完成した後に、特に モジュール に適したいくつかの フレームワーク を使用して、他のページを作成することができます。開発、この方法は非常に非効率的に見えるので、Vue で ピースをグループ化する方法を簡単に見ていきます。

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

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

ファイルシステム内でどのようになっているか見てみましょう

APP.vueはプロジェクトの入り口であり、分割したコンポーネントもオブジェクトです。APP.vueでは各コンポーネントをインポートします。 、 header は右側の header.vue ファイルを指します。 もちろん、es6 のコンポーネント化を使用する必要がない場合は、他の

require を使用して記述する必要があります。これら 2 つのコンポーネントは app.vue に導入されますが、まだページに表示できません。

このコンポーネントを Vue のコンポーネントを通じて登録し、インポートされた を挿入し、レンダリング後にテンプレート レベルで

と

を記述する必要があります。 header.vue と footer.vue のコンテンツになります。 注意すべき点は、Vue を使用する前に登録する必要があるということです

Vue コンポーネント間の通信を紹介します。概念に従います。 header.vue ファイルにコードを登録するには、ユーザー名というデータがあり、メソッドは

propertyprops があり、app.vue が登録されていることがわかります。このコンポーネントを使用する場合、header 属性に msg を直接記述し、app.vue 内の任意のデータを header.vue に渡すことができます。header.vue に msg が記述されていない場合は、すべてが Vue メカニズムによって実装されます。の場合、属性を取得できません。

概要

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