Vue实现自定义下拉菜单功能

先看例子，后面有对用到的知识点的总结

效果图：

实现代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题组件练习/title link rel='样式表type=' text/CSS ' href='组件。CSS ' rel='外部no follow '/脚本src=' http : vue。js '/script/headdydiv id=' app ' H2组件1/h2自定义-选择btn='查询：列表='列表1 '/自定义-选择氘菜单2/h2自定义-选择btn='搜索：列表='列表2 '/自定义-选择/div脚本/注册组件let list1=['北京','上海','深圳','郑州','南阳'];让列表2=['胡歌','陈默','陶亚东','刘同'];Vue.component('custom-select '，{ data : function(){ return { selectShow : false，val:'' })，prop :[' BTN '，' list']，template : ' section class=' wrap ' div class=' search ipt clearFix ' div class=' clearFix ' input type=' text ' class=' keyWord ' : value=' val ' @ click=' selectShow=！select SHow/input type=' button ' : value=' BTN '/span/span/div custom-list v-SHow=' select SHow ' : list=' list ' v-: value 1=' selectValueHandle '/custom-list/div/section `，methods : { selectValueHandle(value){ this。val=值；} } });Vue.component('custom-list '，{ prop s 3360[' list ']，template : ` ul class=' list ' Li v-for=' list中的项' @ click=' search value handle(item)' { { item } }/Li/ul `，methods : { search value handle(item){ this } .$emit('value1 '，item)} })；var vm=new Vue({ el:'#app '，data:{ list1:list1，list 2: list 2 } })；/脚本/正文/html考虑到一些朋友想要钢性铸铁代码，但避免钢性铸铁占据太多位置，所以此处将钢性铸铁压缩了，如果不需要看钢性铸铁的可以直接跳过哈

正文{边际：0字体系列： '微软雅黑} ul li { margin:0划水：0;列表样式： none }输入{ outline :0光标：指针}。{ display :块后的clearfix :内容： " "；clear:both} .包装{ width :348 pxpadding :100 px 76px 50px xmargin :50 px background : URL(images/select _ BG。巴布亚新几内亚)无重复；盒影：2 px 2px 10px # 6789 ad } .搜索ipt {位置：相对；宽度宽度：336pxborder:1px固体# 3736aepadding:5px边界半径：24 px背景： # e4e4fe } .searchIpt输入{行高：34 px边框半径：18像素.搜索第：个类型(1)的ipt输入{ float : left宽度宽度：228像素左填充left:40pxborder:1px固体# C9 C9 D5；背景：#d9d9e2} .搜索ipt输入： th-type(2){ float : right；宽度：58 px高度：36 pxborder:1px实心# fd635e背景：#fd635e} .搜索ipt span { position :绝对值；top :12 pxleft 336015 px宽度：23 pxheight :23 pxbackground : URL(图像/select _ search。png)不重复} .搜索ipt输入第：个类型(1):个焦点{背景： # fff边框-颜色：#fd635e} .列出{margin-top:9px} .列表李{保证金33603 px 0；颜色： # 333线高：30 px左填充左侧：16像素宽度宽度：270像素盒子大小：边框盒子；边框半径：14px} .列表主动的，主动的.列表李：悬停{ color : # fff背景技术# fd635e光标：指针}用到的知识点总结：

组件是可复用的某视频剪辑软件实例，所以它们与新某视频剪辑软件接收相同的选项，例如数据、计算、观察、方法以及生命周期钩子等。仅有的例外是像埃尔这样根实例特有的选项。

使用组件：先要注册组件

一、注册组件：分为全局注册和局部注册

全局注册：

•可以在任何模板中使用，使用之前要先注册

语法：使用Vue.component(组件名，选项对象)组件名命名约定：

•驼峰：(卡米凯斯),烤串（烤串盒)

在超文本标记语言中使用组件：

•使用烤串（巴克-案例)命名法

注意：即使我们的组件名称是驼峰的形式，我们也应该使用html中的烧烤命名方法，不要使用驼峰，否则我们会报告错误

部分注册：

通过选项对象在组件实例中注册，并且仅在注册的范围内使用

{ components: { components:选项对象}} 2。组件中的数据必须是函数

每个组件相互独立。如果它们共享一个对象，当改变一个组件的数据时，会影响其他组件。如果是函数，每个组件都有自己独立的数据。不会互相影响

Data:函数(){return {count: 0}} III。组件之间的通信

如果父组件想要将数据传递给子组件，子组件需要告知父组件它内部发生的大事

父组件-子组件

组件实例的范围是独立的。不能在子组件中直接使用父组件的数据。您可以使用自定义属性绑定组件上的数据。在组件中，您需要用props显式声明自定义属性名

子组件-父组件

需要使用自定义事件，父组件用$on监视自定义事件，而$emit触发父组件关心的自定义事件

对于本节的学习，如果你的理解不是特别好，建议阅读官网Vue.js

摘要

以上是边肖介绍的自定义下拉菜单功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！