代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div style="float:left;margin-right:100px;">
<h2>自定义的下拉框</h2>
<!-- <table>
<tr><custom-select btn="查询"></custom-select></tr>
<tr is="custom-select"></tr>
</table> -->
<custom-select btn="查询" v-bind:list="list1"></custom-select>
</div>
<div style="float:left">
<h2>自定义2</h2>
<custom-select btn="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<script>
//注册组件
// var obj={
// selectShow:false
// }
Vue.component('custom-select',{
data:function(){
return {
selectShow:false,
val:""
};
},
props:["btn","list"],
template:'<section><div class="searchIpt clearFix"><div class="clearFix"><input type="text" class="keyWord" :value="val" @click="selectShow=!selectShow" /><input type="button" value="GO" :value="btn" /><span><span></div><custom-list v-show="selectShow" :list="list" v-on:receive="changValueHandle"></custom-list></div></section>',
methods:{
changValueHandle(value){
this.val=value;
}
}
})
Vue.component("custom-list",{
props:["list"],
template:'<ul class="list"><li v-for="item of list" @click="selectValueHandle">{{item}}</li></ul>',
methods:{
selectValueHandle:function(item){
//在子组件中有交互
//告知父级，改变val的值，需要触发一个自定义事件
this.$emit("receive",item);
}
}
})
// var data={
// list1:["北京","深圳","上海"],
// list2:["17-02-14","17-03-15","17-04-19"]
// }
// $(document).on("changeValue",function(){
// alert(123);
// })
// $(document).trigger("changeValue");
new Vue({
el:'#app',
data:{
list1:["北京","深圳","上海"],
list2:["17-02-14","17-03-15","17-04-19"],
}
})
</script>
</body>
</html>
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
