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

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

        

            
            提交
        
        

            
    

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

components:{
   'TodoItem':TodoItem
},