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

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

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

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

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

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

<div id="root">
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>

            <todo-item v-bind:content="item" v-for="item in list"></todo-item>
        </ul>
    </div>

    <script>
        Vue.component("TodoItem",{
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        })


        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

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

Vue.component("TodoItem",{
            props:['content'],
            template:"<li>{{content}}</li>"
        })

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

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

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

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

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

todo-item v-bind:content="item" v-for="item in list"></todo-item>

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

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

ローカル コンポーネント

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

        

            
            提交
        
        

            
    

    <script>

        var TodoItem={
            props:[&#39;content&#39;],
            template:"<li>{{content}}</li>"
        }

        new Vue({
            el:"#root", 
            data:{
                inputValue:&#39;&#39;,
                list:[]
            },
            components:{
                &#39;TodoItem&#39;:TodoItem
            },
            methods:{
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue = &#39;&#39;  //每次提交后清空
                }
            }
        })
    </script>

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

components:{
   'TodoItem':TodoItem
},

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

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

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