Vue の入門: Todolist の例 グローバル コンポーネントとローカル コンポーネントの入門

エントリーレベルのグローバルコンポーネントとローカルコンポーネントを理解する前に、「コンポーネント化」の概念が何であるかを理解する必要があります。

コンポーネント化は、コンポーネントまたはページの一部として理解できます。たとえば、次の図では、赤枠の部分をコンポーネントに分割できます。コンポーネントを記述してループするだけです。データ。このコンポーネントは、ホームページ、リスト ページなどのどこでも使用でき、現在のページに限定されません。

Vue のグローバル コンポーネントとローカル コンポーネントを使い始めるには、今でも最も単純な Todolist を使用しています。

をコンポーネントとして取り上げ、グローバル コンポーネントとローカル コンポーネントがそれぞれどのように実装されるかを見てみましょう。

グローバル コンポーネント

Vue.component() を使用してグローバル コンポーネントを定義すると、このコンポーネントは id= " だけでなく、現在のページでも使用できます。根"。

TodoItem はコンポーネント名です。HTML では、 は

props を使用してパラメータを受け取ります

#template はコンポーネント スタイル、または一般的な用語でテンプレートを定義します

同時に、値を子コンポーネントに渡す

親コンポーネントがあることに注意する必要があります:

解析してみましょう、リストは親コンポーネントに入力され、todo-itemは子コンポーネントに属しますリスト内でループしたデータ項目はグローバルコンポーネントに渡す必要があるので、v-bindを使用します:content="item" を渡します。content は子コンポーネントによって受信されたデータです。サブコンポーネント定義が props:['content'] を受け取った後、次のテンプレートを作成できます:"

{{content}}< ;/li>" を実行し、コンテンツを使用してデータを表示します。

ローカル コンポーネント

同じ効果を得るために、ローカル コンポーネントを使用してみましょう。

          

           

            
            提交
           
           

            < todo-item> < ul>
           
          

ログイン後にコピー

グローバル コンポーネントとの違いは、var TodoItem={} を通じてローカル コンポーネントを定義し、定義後に新しい Vue で宣言する必要があることです。

components:{ 'TodoItem':TodoItem },

ログイン後にコピー

その場合、ローカル コンポーネントはid=「ルート」。

わかりました。上記は、グローバル コンポーネントとローカル コンポーネントの使用を開始し、昇進と昇給を得て、Vue スキルをすぐに習得するのに役立つ Todolist の例です。

以上がVue の入門: Todolist の例 グローバル コンポーネントとローカル コンポーネントの入門の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。