父级向子集通信
子集向父级通信1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./style.css">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<div style="float: left;">
<h2>自定义的下拉框</h2>
<custorm btn="查询" :list="list1"></custorm>
</div>
<div style="float: left;">
<h2>自定义的下拉框2</h2>
<custorm btn="搜查" :list="list2"></custorm>
</div>
</div>
<script>
Vue.component('custorm',{
data:function(){
return{
isshow:false,
val:""
}
},
props:["btn","list"],
template:`
<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="isshow=!isshow"/>
<input type="button" :value="btn">
<span></span>
</div>
<custormChild v-show="isshow" :listchild="list" v-on:recive="changeValueHandle"></custormChild>
</div>
</section>
`,
methods:{
changeValueHandle(item){
this.val=item;
}
}
})
Vue.component('custormChild',{
props:["listchild"],
template:`
<ul class="list">
<li v-for="item of listchild" @click="select(item)">{{item}}</li>
</ul>
`,
methods:{
select(item){
this.$emit('recive',item)
}
}
})
let vm=new Vue({
el:"#app",
data:{
list1:["北京","上海","广州"],
list2:["张幸","张琪","zhangdaguo"]
}
})
</script>
</body>
</html>
###css1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
body{
margin:0;
font-family:"微软雅黑";
}
ul,li{
margin:0;
padding:0;
list-style:none;
}
input{
outline:none;
cursor: pointer;
}
.clearFix:after{
display: block;
content:'';
clear:both;
}
.warp{
width: 348px;
padding:100px 76px 50px;
margin:50px;
background:url(images/select_bg.png) no-repeat;
box-shadow:2px 2px 10px #6789ad;
}
.searchIpt{
position: relative;
width: 336px;
border:1px solid #3736ae;
padding:5px;
border-radius:24px;
background: #e4e4fe;
}
.searchIpt input{
line-height: 34px;
border-radius:18px;
}
.searchIpt input:nth-of-type(1){
float: left;
width: 228px;
padding-left: 40px;
border:1px solid #c9c9d5;
background: #d9d9e2;
}
.searchIpt input:nth-of-type(2){
float: right;
width: 58px;
height: 36px;
border:1px solid #fd635e;
background: #fd635e;
}
.searchIpt span{
position: absolute;
top:12px;
left: 15px;
width: 23px;
height: 23px;
background: url(images/select_search.png) no-repeat;
}
.searchIpt input:nth-of-type(1):focus{
background: #fff;
border-color:#fd635e;
}
.list{
margin-top:9px;
}
.list li{
margin:3px 0;
color:#333;
line-height: 30px;
padding-left: 16px;
width: 270px;
box-sizing:border-box;
border-radius:14px;
}
.list li.active,.list li:hover{
color:#fff;
background: #fd635e;
cursor: pointer;
}