番外篇：VUE（八）自定义组件 

<body>
    <!--3、定义id为app的div 调用自定义组件userinfo -->
    <div id="app">
        <!--调用自定义组件userinfo 参数为u-->
        <userinfo v-for="user in users" :u="user"></userinfo>
        <!--调用自定义组件useroptions 参数为options-->
        <useroptions :options="items"></useroptions>
    </div>
    
    <script>
        //2、定义一个名为userinfo的列表组件 参数为u
        Vue.component('userinfo',{
            props:['u'],
            template: '<li>{{u.name}}==>{{u.age}}</li>'
        });

        //2、定义一个名为useroptions的下拉框组件 参数为options
        Vue.component('useroptions',{
            props:['options'],
            template:'<select> <option v-for="option in options" :value="option.id"> {{option.name}} </option> </select>'
        });

        //1、定义一个vue对象
        new Vue({
            el:"#app",
            data:{
                users:[
                    {name:"zhangsan",age:19},
                    {name:"lisi",age:20}
                ],

                items:[
                    {id:1,name:'zhangsan'},
                    {id:2,name:'lishi'}
                ]
            }
        });
    </script>
</body>
posted @ 2021-05-31 17:46  努力的校长  阅读(40)  评论(0)    收藏  举报