Vue to pass different values to the component

Here is an example of the Vue official website, vue to pass data traversal to multiple components, which is what we often do in actual development. Generally large applications are built using components, we need to pass different values to the components to achieve different display, to achieve the reuse of code.

<! DOCTYPE html>  
Code Analysis: 
Here I use a Vue CDN directly, and then instantiate the Vue object to use. Create a Vue instance

    var app7 = new Vue ({
        el: ' #app ',
        data: {
            grocerylist: [
                {id:0, text: ' Vegetable '},
                {id:1, text: ' Cheese '},< c7/>{id:2, text: ' Anything other people eat '}}}
    
Create a Vue component globally
    Vue.component (' Todo-item ', {
        props: [' todo '],
        Template: ' <li>{{todo.text}}</li> '
    })
Assign a different value to a component through a Vue instance (bind the value to a variable via bind, and the subassembly accepts the variable value passed through props)
    <div id= "App" >
        <ol>
            <!--Now we provide the Todo object for each Todo-item Todo object is a variable, that is, its contents can be dynamic. We also need to provide a "key" for each component. -->
            <todo-item v-for= "item in Grocerylist" v-bind:todo= "item" v-bind:key= "Item.id" ></todo-item>
        </ol>
    </div>