Erste Schritte mit Vue: Todolist-Beispiele erleichtern Ihnen den Einstieg in globale und lokale Komponenten

Bevor wir die einführenden globalen Komponenten und lokalen Komponenten verstehen, müssen wir verstehen, was das Konzept der „Komponentisierung“ ist.

Komponentisierung kann als Komponente oder Teil der Seite verstanden werden. Im Bild unten kann der rote Boxteil beispielsweise nur in eine Komponente unterteilt werden und dann die Daten schleifen. Diese Komponente kann überall auf der Startseite, Listenseite usw. verwendet werden und ist nicht auf die aktuelle Seite beschränkt.

Wir verwenden immer noch die einfachste Todolist, um mit den globalen Komponenten und lokalen Komponenten von Vue zu beginnen. Nehmen wir

als Komponente und sehen wir uns dann an, wie globale Komponenten bzw. lokale Komponenten implementiert werden.

Globale Komponente

<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>

Wir verwenden Vue.component(), um eine globale Komponente zu definieren, dann kann diese Komponente auf der aktuellen Seite verwendet werden, nicht nur in id="root".

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

TodoItem ist der Name der Komponente. In HTML verwendet

props, um Parameter zu empfangen,

template, um den Komponentenstil zu definieren, oder um es für Laien auszudrücken: template

und auch beachten: Es gibt eine übergeordnete Komponente, die einen Wert an die untergeordnete Komponente übergibt:

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

Lassen Sie uns die Liste als Eingabe für die übergeordnete Komponente analysieren, das Aufgabenelement gehört zur untergeordneten Komponente und die Daten Das in der Liste durchgeschleifte Element muss an die globale Komponente übergeben werden. Daher wird v -bind:content="item" übergeben, wobei der Inhalt die von der Unterkomponente empfangenen Daten sind. Anschließend wird die Unterkomponente für den Empfang von Requisiten definiert:[' content'] können Sie template:"

{{content}}"Die Daten werden mithilfe von Inhalten angezeigt.

Lokale Komponenten

Um den gleichen Effekt zu erzielen, versuchen wir es mit lokalen Komponenten.

        

            
            提交
        
        

            
    

    <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>

Der Unterschied zu globalen Komponenten besteht darin, dass wir lokale Komponenten über var TodoItem={} definieren und sie nach der Definition im neuen Vue deklarieren müssen

components:{
   'TodoItem':TodoItem
},

Dann werden die lokalen Komponenten nur in id="root" verwendet.

Okay, das Obige ist das Todolist-Beispiel, das Ihnen den Einstieg in globale Komponenten und lokale Komponenten erleichtern, eine Beförderung und Gehaltserhöhung erhalten und Ihre Vue-Fähigkeiten schnell erwerben soll!

Das obige ist der detaillierte Inhalt vonErste Schritte mit Vue: Todolist-Beispiele erleichtern Ihnen den Einstieg in globale und lokale Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!