Vue实现⾃定义下拉菜单功能先看例⼦，后⾯有对⽤到的知识点的总结
效果图：
实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件练习</title>
<link rel="stylesheet" type="text/css" href="component.css" rel="external nofollow" />
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h2>组件1</h2>
<custom-select btn="查询" :list="list1"></custom-select>
<h2>菜单2</h2>
<custom-select btn="搜索" :list="list2"></custom-select>
</div>
<script>
//注册组件
let list1 = ["北京","上海","深圳","郑州","南阳"];
let list2 = ["胡歌","陈默","陶亚东","刘同"];
Vueponent("custom-select",{
data:function(){
return {
selectShow:false,
val:""
}
},
props:["btn","list"],
template:`
<section class="wrap">
<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:value1="selectValueHandle"
></custom-list>
</div>
</section>
`,
methods:{
selectValueHandle(value){
this.val = value;
}
}
});
Vueponent("custom-list",{
props:["list"],
template:`
<ul class="list">
<li
v-for="item in list"
@click="searchValueHandle(item)"
>{{item}}</li>
</ul>
`,
methods:{
searchValueHandle(item){
this.$emit("value1",item)
}
}
});
var vm = new Vue({
el:"#app",
data:{
list1:list1,
list2:list2
}
});
</script>
</body>
</html>
考虑到⼀些朋友想要css代码，但避免css占据太多位置，所以此处将css压缩了，如果不需要看css的可以直接跳过哈
body{margin:0;font-family:"微软雅⿊"}ul li{margin:0;padding:0;list-style:none}input{outline:0;cursor:pointer}.clearFix:after{display:block;content:"";clear:both}.wrap{width:348px;padding:100px 76px 50px;margin:50px;background:url(images/select_bg.png) no-repea ⽤到的知识点总结：
组件是可复⽤的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及⽣命周期钩⼦等。仅有的例外是像 el 这样根实例特有的选项。
使⽤组件：先要注册组件
⼀、注册组件：分为全局注册和局部注册
全局注册：
•可以在任何模板中使⽤，使⽤之前要先注册
语法：使⽤Vueponent(组件名，选项对象)
组件名命名约定：
•驼峰：(camelCase)、烤串(kebab-case)
在html中使⽤组件：
•使⽤烤串（keba-case）命名法
注意：即便我们的组件名是驼峰的形式，在html中也要使⽤的烤串命名法，不要使⽤驼峰⽅式，否则会报错
局部注册：
在组件实例中通过选项对象注册，只在所注册的作⽤域中使⽤
{
components:{
组件名：选项对象
}
}
⼆、组件中data必须是函数
每个组件都是相互独⽴的，如果它们公⽤⼀个对象，在更改⼀个组件数据的时候，会影响其他组件。如果是函数的哈，每个组件都有⾃⼰独⽴的数据。相互之间不会影响
data: function () {
return {
count: 0
html下拉菜单的制作方法
}
}
三、组件间通信
⽗组件要给⼦组件传递数据，⼦组件需要将它内部发⽣⼤的事情告知给⽗组件
•⽗组件->⼦组件
组件实例的作⽤域是孤⽴的，不能在⼦组件直接⽤⽗组件的数据
可以在组件上使⽤⾃定义属性绑定数据，在组件中需要显式的⽤props声明⾃定义属性名
•⼦组件->⽗组件
需要⽤到⾃定义事件，⽗组件⽤$on监听⾃定义事件，$emit触发⽗组件所关⼼的⾃定义事件
针对这⼀节的学习，如果您理解的不是特别的好，推荐看官⽹
总结
以上所述是⼩编给⼤家介绍的Vue实现⾃定义下拉菜单功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。