Getting Started with Vue: Todolist Examples Get You Started with Global Components and Local Components

Before understanding the entry-level global components and local components, we need to understand what the concept of "componentization" is.

Componentization can be understood as a component or a part of the page. For example, in the figure below, the red box part can be divided into a component. We only need to write a component and then loop the data. This component may be used anywhere on the home page, list page, etc., and is not limited to the current page.

We still use the simplest todolist to get started with Vue’s global components and local components. Let's take

as a component, then let's see how global components and local components are implemented respectively.

Global component

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

We use Vue.component() to define a global component, then this component can be used on the current page, not just id= "root".

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

TodoItem is the component name. In html, uses

props to receive parameters

template defines the component style, or in popular terms template

At the same time, you need to note that there is a parent component passing value to the child component:

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

Let’s analyze it , list is input to the parent component, and todo-item belongs to the child component. The data item looped in the list needs to be passed to the global component, so use v-bind:content="item" to pass it, where content is the data received by the child component, then After the subcomponent definition receives props:['content'], you can template:"

{{content}}

" and use content to display data.

Local components

For the same effect, let’s try using local components.

        

            
            提交
        
        

            
    

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

The difference from global components is that we define local components through var TodoItem={}, and after definition, we must declare them in new Vue

components:{
   'TodoItem':TodoItem
},

Then the local components are only in id=" root".

Okay, the above is a todolist example to help you get started with global components and local components, get a promotion and salary increase, and get your Vue skills quickly!

The above is the detailed content of Getting Started with Vue: Todolist Examples Get You Started with Global Components and Local Components. For more information, please follow other related articles on the PHP Chinese website!