記賬系統(四) 元件(城市選擇器)

2021-08-31 21:39:49 字數 1548 閱讀 7100

1、準備中國所有省、市、縣的資料來源;

2、準備三個下拉框a(省)、b(市)、c(縣),三個下拉框存在聯動關係,

即:a下拉框選擇省份之後,b下拉框中被填充a對應的城市名;

b下拉框選擇城市之後,c下拉框中被填充b對應的縣名;

3、城市選擇器對外提供的資料:當前三個下拉框選擇的資料;

4、城市選擇器接受外界傳入的值:

省、市、縣的資料,用於給城市選擇器賦值;

id,為了區分在同乙個頁面中多處使用的城市選擇器;

//獲取部分資料,表示省級、市級、縣級

module.exports = [...

, ,

...]

說明:全國的省份、市級、縣級的資料存放於assets資料夾中的js檔案。通過module.exports對外界提供介面;

使用方法:import provincedata from "./assets/..."匯入資料;

/*省級下拉框*/

/*市級下拉框*/

/*縣級、區下拉框*/

................

data(),

/*市級下拉框框的id、name、下拉框中的資料*/

selectitems_city:

,/*縣級下拉框框的id、name、下拉框中的資料*/

selectitems_block:

,selectedprovince:"",//下拉框當前選擇的省

selectedcity:"",//下拉框當前選擇的市

selectedblock:"",//下拉框當前選擇的縣

allprovince:,//存放下拉框的所有省份

allcity:,//存放當前下拉框的省份對應的所有城市

allblock:,//存放當前下拉框的城市對應的所有縣、區

//判斷是給select賦值還是選擇。true-選擇;false-賦值

//因為選擇下拉框時,會置空後面的下拉框,賦值時不會。

isselect:true}}

.........

說明:mounted生命週期中,dom已經生成。
mounted()
/*把省份、城市、縣級區分開*/

getselectitems(){

let _this = this;

//獲取所有城市的資料

let len = provinces.length;

//資料處理:區分出省、市、縣/區

for(let i=0;i

:sour--》向子級傳入的值

v-on:getselectdata --》通過getselectdata接受子級傳入父級的值

待定。。。。。。

React學習(四)元件

元件 上面 中,變數 hellomessage 就是乙個元件類。模板插入 時,會自動生成 hellomessage 的乙個例項 下文的 元件 都指元件類的例項 所有元件類都必須有自己的 render 方法,用於輸出元件。注意,元件類的第乙個字母必須大寫,否則會報錯,比如hellomessage不能寫...

四 元件的使用

元件可以直接通過new 關鍵子來建立,比如控制項乙個視窗,使用new ext.window 建立乙個 則使用new ext.gridpanel 除了一些普通的元件以外,一般都會在建構函式中通過傳遞構造引數來建立元件。元件的建構函式中一般都可以包含乙個物件,這個物件包含建立元件所需要的配置屬性及值,元...

Vue學習(四)元件(參考)

什麼是元件 元件的出現,就是為了拆分vue例項的 量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可 元件化和模組化的不同 使用 vue.extend 配合 vue.component 方法 var login vue.extend vue.co...