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