今回は、vue 領域選択コンポーネントを使用する手順について詳しく説明します。vue 領域選択コンポーネントを使用する際の 注意事項 は何ですか?実際のケースを見てみましょう。
概要
は、主に全国の地域データの操作に使用されます。これには、省、市、区の3レベルのリンク、地域データの追加と注: このコンポーネントは vue.js コンポーネントです
デモ
デモするにはここをクリックしてくださいAPI
Propstype | 手順 | |
---|---|---|
配列 | 受信コンポーネントエリアデータ |
名前パラメータ | 説明 | |
---|---|---|
area | コンポーネントの詳細な説明selectedregion |
area
area このパラメータは必須であり、コンポーネントの初期化時の領域データを表します。空にすることもできます。 area は複数のオブジェクトを含む
array です。各オブジェクトのデータ構造は次のとおりです。 ...
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}, ... }
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
jQuery.i18n に基づいた Web フロントエンド国際化の実装jQuery.i18n.properties js 国際化標準の実装方法以上がvue 領域選択コンポーネントを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。