【IMWeb训练营作业02 select组件】

效果图

Vue提供了Vue.component来全局注册组件，也可以使用局部注册。在这个简单的例子中使用props从父组件向子组件传递数据。

代码

<div id="app">
        <z-select :lists="list01"></z-select>
        <z-select :lists="list02"></z-select>
    </div>
    <script>
    Vue.component('z-select',{
        template:`<section class="waarp" >
    <div class="searchInput clearfix">
        <div class="clearfix">
            <input type="text" class="keyword" value="" @click="selectValue = !selectValue">
            <input type="button" value="GO">
            <span></span>
        </div>  
        <ul class="list" v-show="selectValue">
            <li v-for="item in lists">{{item}}</li>
        </ul>
    </div>
</section>`,
    props:['lists'],
    data(){
        return {
            selectValue:false
        }
    }
    })
        var vm = new Vue({
            el:'#app',
            data:{
                list01:['html','html5','css','css3'],
                list02:['angular','vue','react']
            }
        })
    </script>