Vue實(shí)現(xiàn)自定義下拉菜單功能
先看例子，后面有對(duì)用到的知識(shí)點(diǎn)的總結(jié)
效果圖：
實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>組件練習(xí)</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>
//注冊(cè)組件
let list1 = ["北京","上海","深圳","鄭州","南陽"];
let list2 = ["胡歌","陳默","陶亞東","劉同"];
Vue.component("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;
}
}
});
Vue.component("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占據(jù)太多位置，所以此處將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-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}
用到的知識(shí)點(diǎn)總結(jié)：
組件是可復(fù)用的 Vue 實(shí)例，所以它們與 new Vue 接收相同的選項(xiàng)，例如 data、computed、watch、methods 以及生命周期鉤子等。僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。
使用組件：先要注冊(cè)組件
一、注冊(cè)組件：分為全局注冊(cè)和局部注冊(cè)
全局注冊(cè)：
•可以在任何模板中使用，使用之前要先注冊(cè)
語法：使用Vue.component(組件名,選項(xiàng)對(duì)象)
組件名命名約定：
•駝峰：(camelCase)、烤串(kebab-case)
在html中使用組件：
•使用烤串（keba-case）命名法
注意：即便我們的組件名是駝峰的形式，在html中也要使用的烤串命名法，不要使用駝峰方式，否則會(huì)報(bào)錯(cuò)
局部注冊(cè)：
在組件實(shí)例中通過選項(xiàng)對(duì)象注冊(cè)，只在所注冊(cè)的作用域中使用
{
components:{
組件名:選項(xiàng)對(duì)象
}
}
二、組件中data必須是函數(shù)
每個(gè)組件都是相互獨(dú)立的，如果它們公用一個(gè)對(duì)象，在更改一個(gè)組件數(shù)據(jù)的時(shí)候，會(huì)影響其他組件。如果是函數(shù)的哈，每個(gè)組件都有自己獨(dú)立的數(shù)據(jù)。相互之間不會(huì)影響
data: function () {
return {
count: 0
}
}
三、組件間通信
父組件要給子組件傳遞數(shù)據(jù)，子組件需要將它內(nèi)部發(fā)生大的事情告知給父組件
•父組件->子組件
組件實(shí)例的作用域是孤立的，不能在子組件直接用父組件的數(shù)據(jù)
可以在組件上使用自定義屬性綁定數(shù)據(jù)，在組件中需要顯式的用props聲明自定義屬性名
•子組件->父組件
需要用到自定義事件，父組件用$on監(jiān)聽自定義事件，$emit觸發(fā)父組件所關(guān)心的自定義事件
針對(duì)這一節(jié)的學(xué)習(xí)，如果您理解的不是特別的好，推薦看官網(wǎng)Vue.js
總結(jié)
以上所述是小編給大家介紹的Vue實(shí)現(xiàn)自定義下拉菜單功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- 詳解Vue用自定義指令完成一個(gè)下拉菜單（select組件）
- vue下拉菜單組件（含搜索）的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)帶過渡效果的下拉菜單功能
- vue實(shí)現(xiàn)下拉菜單樹
- 解決vue動(dòng)態(tài)下拉菜單 有數(shù)據(jù)未反應(yīng)的問題
- vue實(shí)現(xiàn)導(dǎo)航欄效果(選中狀態(tài)刷新不消失)
- vue實(shí)現(xiàn)nav導(dǎo)航欄的方法
- vue使用ElementUI時(shí)導(dǎo)航欄默認(rèn)展開功能的實(shí)現(xiàn)
- Vue實(shí)現(xiàn)導(dǎo)航欄菜單
- vue實(shí)現(xiàn)導(dǎo)航欄下拉菜單
相關(guān)文章
在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
本篇文章主要介紹了詳解Vue 非父子組件通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2021-10-10
vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化
這篇文章主要介紹了vue3選項(xiàng)式api如何監(jiān)控?cái)?shù)組變化問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
本篇文章主要介紹了深入理解vue-router之keep-alive。keep-alive使被包含的組件保留狀態(tài)，或避免重新渲染，有興趣的可以了解一下2017-08-08
在現(xiàn)代前端開發(fā)中,組件化開發(fā)已經(jīng)成為主流,其中?Vue.js?的插槽（slots）特性為我們構(gòu)建靈活、可復(fù)用的組件提供了強(qiáng)有力的支持,下面我們就來看看Vue如何通過插槽實(shí)現(xiàn)高復(fù)用組件吧2024-11-11
這篇文章主要介紹了基于Vuejs和Element的注冊(cè)插件的編寫方法,需要的朋友可以參考下2017-07-07
VueUse 是一個(gè)基于 Composition API 的實(shí)用函數(shù)集合。本文就詳細(xì)的介紹了VueUse的具體用法，具有一定的參考價(jià)值，感興趣的可以了解一下2021-11-11
在項(xiàng)目中會(huì)用到 Electron ， 一種最流行的框架，可使用Javascript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序。在本文中，我們將研究如何通過 Vite 開發(fā) Vue 3 桌面項(xiàng)目，感興趣的可以了解一下2021-05-05
原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對(duì)象是否為空示例實(shí)現(xiàn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2021-11-11
這篇文章主要為大家詳細(xì)介紹了vue+js實(shí)現(xiàn)微信上傳圖片選擇功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07