vue 组件 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h2>自定义的下拉框</h2>
            <custom-select btn='查询' v-bind:list="list1"></custom-select>
            <h2>自定义的下拉框2</h2>
            <custom-select btn='搜索' v-bind:list="list2"></custom-select>
        </div>
        
    </body>
    <script>
        //注册组件
        Vue.component("custom-select",{
            data:function(){
                return{
                    selectShow:false,
                    val:""
                }
            },
            props:["btn","list"],
            template:`
                <section class="warp">
                    <div class="searchIpt clearFix">
                        <div class="clearFix">
                            <input type="text" class="keyWord" :value="val" @click="selectShow=!selectShow"/>
                            <input type="button" :value="btn" />
                            <span></span>
                        </div>
                        <custom-list 
                            v-show="selectShow" 
                            :list=list
                            v-on:receive="changeValueHandle"
                        ></custom-list>
                    </div>
                </section>
              `,
              methods:{
                  changeValueHandle(value){
                      this.val=value;
                  }
              }
        })
        Vue.component("custom-list",{
            props:["list"],
            template:
            `
            <ul class="list" v-show='selectShow'>
                <li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
            </ul>
            `,
            methods:{
                selectValueHandle:function(item){
                    //在子组件中有交互
                    //告知父级，改变val的值,需要触发一个自定义事件
                    this.$emit("receive",item)
                    
                }
            }
        })
        
        new Vue({
            el:"#app",
            data:{
                list1:["北京","上海","杭州","广州","兰州",],
                list2:["20-05-06","20-06-30","20-07-05","20-08-12","20-08-23",]
            }
        })
    </script>
</html>

 

posted @ 2020-08-29 10:10  webxy  阅读(136)  评论(0)    收藏  举报