這次帶給大家vue地區選擇組件使用步驟詳解，vue地區選擇組件使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
概述
主要用於全國地區資料的操作，包括省，市，區三級連動，地區資料的新增和刪除 ； 在操作地區資料時，以前也用過樹形的地區選擇元件，但因其在再操作大量的地區資料時，渲染緩慢，所以我們就換了另一種資料展示形式和互動形式，從而就有了這個組件。
注意：該元件是vue.js 元件
#demo
搶鮮體驗請點擊這裡demo
API
Props
| #參數 | 說明 | |
|---|---|---|
| area | Array | #傳入元件的地區的資料 |
| 事件名稱 | #參數##說明 | |
|---|---|---|
| area | #元件中選取的地區 |
area
area 參數是必選項，表示元件初始化時的地區數據，可以為空。 area 是一個包含多個物件的
陣列，其中每個物件的資料結構如下:因為後來在實際的使用中，發現有時候，後台只會傳回一個地區的ID 值，所以這裡做了最佳化，可以只傳入ID 的值，像這樣：...
area: [
{Name: '北京', ID: '01'},
{Name: '南京', ID: '0401'},
{Name: '西湖区', ID: '060105'}
],
...登入後複製
...
area: [
{ID: '01'},
{ID: '0401'},
{ID: '060105'}
],
...selected 是由元件內部發布的事件，你可以在元件外面訂閱這個事件，從而得到它傳回的值，這個值就是元件目前選取的所有的地區，傳回的這個值是由多個包含地區資料的物件組成的數組，資料結構和area 參數一樣
簡單的範例<p>
<addressmap :area="area" @selected="selected"></addressmap>
</p>
登入後複製
#安裝和使用##npm install adc -addressmap
若作為全域元件使用
//在项目入口文件
import Vue from 'vue'
import Addressmap from 'adc-addressmap'
Vue.component('Addressmap', Addressmap)
若作为局部组件
//在某个组件中
import Addressmap from 'adc-addressmap'
export default {
...
components: { Addressmap},
...
}根據jQuery.i18n實作web前端國際化
jQuery.i18n.properties如何實作js國際化標準
以上是vue地區選擇組件使用步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
