Premiers pas avec Vue : exemples Todolist pour démarrer avec les composants globaux et les composants locaux

Avant de comprendre les composants globaux d'introduction et les composants locaux, nous devons comprendre ce qu'est le concept de « composantisation ».

La composantisation peut être comprise comme un composant ou une partie de la page. Par exemple, dans l'image ci-dessous, la partie boîte rouge peut être divisée en un composant. Il suffit d'écrire un composant puis de boucler le composant. données. Ce composant peut être utilisé n'importe où sur la page d'accueil, la page de liste, etc., et n'est pas limité à la page actuelle.

Nous utilisons toujours la liste de tâches la plus simple pour démarrer avec les composants globaux et locaux de Vue. Prenons

comme composant, puis voyons comment les composants globaux et locaux sont implémentés respectivement.

Composant global

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

Nous utilisons Vue.component() pour définir un composant global, alors ce composant peut être utilisé sur la page actuelle, pas seulement id= " racine".

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

TodoItem est le nom du composant en HTML, utilise

props pour recevoir les paramètres

le modèle définit le style du composant, ou en termes populaires modèle

En même temps, vous devez noter qu'il existe uncomposant parent transmettant la valeur au composant enfant :

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

Analysons-le, la liste est entrée dans le composant parent et todo-item appartient au composant enfant. L'élément de données en boucle dans la liste doit être transmis au composant global, utilisez donc v-bind : content="item" pour le transmettre, où content correspond aux données reçues par le composant enfant, puis une fois que la définition du sous-composant a reçu props:['content'], vous pouvez modéliser :"

{{content}}< /li>" et utilisez le contenu pour afficher les données.

Composants locaux

Pour le même effet, essayons d'utiliser des composants locaux.

        

            
            提交
        
        

            
    

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

La différence avec les composants globaux est que nous définissons les composants locaux via var TodoItem={}, et après définition, nous devons les déclarer dans new Vue

components:{
   'TodoItem':TodoItem
},

Ensuite, les composants locaux sont uniquement dans identifiant="racine".

D'accord, ce qui précède est l'exemple de Todolist pour vous aider à démarrer avec des composants globaux et des composants locaux, à obtenir une promotion et une augmentation de salaire, et à acquérir rapidement vos compétences Vue !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!