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