vue 通過下拉框元件學習vue中的父子通訊

2022-10-07 08:57:08 字數 691 閱讀 5792

如果說vue元件化開發中第一步應該了解的是什麼的話,那無疑是父子元件之間是如何實現通訊的(說白了就是父子元件中資料是如何傳遞的),只有理解了這一步,才能更好的開發元件

這裡先提出兩個關鍵詞: props 與 emit :

寫這個元件之前,先看看效果圖:

元件開發分析:

既然是元件:

先寫結構:

父元件

子元件

總結最終效果如下:

附上元件中的css,僅供參考:

.select-box

.select-title

.select-title:after

.select-title-active

.select-title-active:after

.select-options

.select-option-item

.select-option-item:hover,.select-option-active

.arrow-top

.arrow-top:after

.slide-down-enter-active,.slide-down-le**e

.slide-down-enter

.slide-down-le**e-active

總結本文標題: vue 通過下拉框元件學習vue中的父子通訊

本文位址:

vue 下拉框 VUE this丟失

最近在乙個 vue 的專案中重構功能時,遇到乙個有趣的問題,場景是通過介面動態獲取名稱並顯示在下拉列表中,第一次實現的 如下 但這樣寫 可擴充套件性很低,例如這時候需要新增乙個查詢使用者身份的下拉框就要再寫乙個方法,為了避免複製一堆重複 所以我做了一些修改 但是在執行後,輸入名稱,檢視中的 opti...

下拉框元件

createselect.js text 建立民族陣列 var arraynation new array 漢族 蒙古族 彝族 侗族 哈薩克族 畲族 納西族 仫佬族 仡佬族 怒族 保安族 鄂倫春族 回族 壯族 瑤族 傣族 高山族 景頗族 羌族 錫伯族 烏孜別克族 裕固族 赫哲族 藏族 布依族 白族 ...

vue動態生成下拉框 vue構建動態表單

概述 後台管理系統裡面有非常多的表單需求,我們希望能夠通過寫乙個json格式的資料,通過vue的迴圈動態地去渲染動態表單。並且能夠在外部得到渲染出來的表單的資料,可以對表單進行重置操作。我結合element ui的控制項的下拉框,輸入框,時間選擇控制項和vue treeselect,做了乙個動態表單...