今天完成的是自定义下拉框，涉及组件，组件注册、组件间通信，关于组件间通信，老师有张ppt感觉挺好，如下图：
完成效果图如下：
LICEcap截图
页面代码：
<html>
<head>
<title>vue练习之select</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./select.css" />
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="app">
<div class="left">
<h2>自定义下拉框</h2>
<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
</div>
<div class="left">
<h2>自定义下拉框2</h2>
<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<script type="text/javascript">
//注册组件 全局
Vue.component("custom-select",{
data:function(){
return {
selectShow:false,
val:"",
}
},
props:["btnValue","list"],
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" @click="selectShow=!selectShow" :value="val" />
<input type="button" class="search" :value="btnValue" />
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
@receive="changeValueHandle"
></custom-list>
</div>
</section>`,
methods:{
changeValueHandle(value){
this.val = value;
}
}
})
Vue.component("custom-list",{
props:["list"],
template:`<ul class="list">
<li v-for="item of list" @click="selectVuleHandle(item)">{{item}}</li>
</ul>`,
methods:{
selectVuleHandle:function(item){
//告知父级，改变val的值，需要触发自定义事件
this.$emit("receive",item);
},
}
})
var data = {
list1:["北京","天津","河北"],
list2:["11","22","33","44"]
}
new Vue({
el:"#app",
data:data,
})
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
