效果图：
代码
1 // 组件三大块：样式结构 行为逻辑 数据
2 // //注册组件 组件名 组件描述
3 //注册组件
4
5 // var obj = {
6 // 不能共享一个对象 不然显示会一起运行
7 // selectShow: false
8 // }
9 Vue.component("custom-select", {
10 data: function() {
11 return {
12 selectShow: false,
13 val: ""
14 };
15 },
16 props: ["btnValue", "list"],
17 template: `<section class="warp">
18 <div class="searchIpt clearFix">
19 <div class="clearFix">
20 <input type="text" class="keyWord" @click="selectShow = !selectShow" :value="val" />
21 <input type="button" :value="btnValue">
22 <span></span>
23 </div>
24 <custom-list
25 v-show="selectShow"
26 :zujlist="list"
27 v-on:receive="changeValue"></custom-list>
28 </div>
29 </section>`,
30 methods: {
31 changeValue: function(value) {
32 this.val = value;
33 }
34 }
35 })
36 //子组件 绑定 自定义事件 父组件监听子组件changvalue 当子组件发生改变 通过receive通知父组件 用$emit
37 Vue.component("custom-list", {
38 props: ["zujlist"],
39 template: `<ul class="list">
40 <li v-for="item of zujlist" @click="selectValuehandle(item)">{{item}}</li>
41 </ul>`,
42 methods: {
43 selectValuehandle: function(item) {
44 //点击之后把子组件的值传递给父组件中
45 //用到自定义事件
46 //触发自定义事件
47 this.$emit("receive", item)
48 }
49 }
50
51 })
52
53 new Vue({
54 el: "#app",
55 data: {
56 list1: ["北京", "上海", "杭州"],
57 list2: ["吃饭", "睡觉", "打豆豆"]
58 }
59
60
61 })
62 //this 指当前 vue的实例
63 //父组件 传值 子组件 ： 自定义标签 上 设置自定义属性 (驼峰命名) 用props
64 //data 不能兑现形式存在 用函数形式 函数里面 return一个对象
65 //<custom-list></custom-list> 子组件
66 //methods函数 必须放在对应组件 方法下面 尔不是 主程序vue里面
67
68 //单向数据流HTML
<!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="css/style.css">
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<div style="float:left;">
<h2>自定义的下拉框</h2>
<custom-select btn-Value="查询" :list="list1"></custom-select>
</div>
<div style="float:left;">
<h2>自定义的下拉框2</h2>
<custom-select btn-Value="搜索" :list="list2"></custom-select>
</div>
</div>
<!--<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" value="" />
<input type="button" value="GO">
<span></span>
</div>
<ul class="list">
<li>html+css</li>
<li>html5+css3</li>
<li>javascript</li>
<li>angular</li>
<li>react</li>
<li>vue</li>
<li>jquery</li>
<li>nodejs</li>
</ul>
</div>
</section>-->
<script src="js/select.js"></script>
</body>
</html>