Vue 영역 선택 구성 요소를 사용하는 방법

이번에는 Vue 영역 선택 컴포넌트 사용법과 Vue 영역 선택 컴포넌트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례입니다.

개요

주로 도, 시, 군의 3단계 연계, 지역 데이터 추가 및 삭제 등 국가 지역 데이터 운영에 사용됩니다. Selection은 컴포넌트 이전에도 사용되었으나, 많은 양의 지역 데이터를 연산할 때 렌더링 속도가 느리기 때문에 데이터 표시 형태와 인터랙션 형태를 다르게 변경하여 이 컴포넌트를 탄생시켰습니다.

참고: 이 구성 요소는 vue.js 구성 요소입니다.

demo

데모하려면 여기를 클릭하세요

API

Props

Parameters	type	지침
area	Array	들어오는 구성 요소 영역 데이터

Events

EventsName	Parameters	Description
selected	area	구성 요소에 대한 자세한 설명 selected Region

Props

area

area 매개변수는 필수이며 구성요소가 초기화될 때 지역 데이터를 나타냅니다. 비어 있을 수 있습니다. Area는 여러 객체를 포함하는 배열입니다. 각 객체의 데이터 구조는 다음과 같습니다.

...
area: [
 {Name: '北京', ID: '01'},
 {Name: '南京', ID: '0401'},
 {Name: '西湖区', ID: '060105'}
],
...

나중에 실제 사용하면서 배경이 영역의 ID 값만 반환하는 경우가 있어서 여기에서 수행했습니다. 최적화에서는 다음과 같이 ID 값만 전달할 수 있습니다.

...
area: [
 {ID: '01'},
 {ID: '0401'},
 {ID: '060105'}
],
...

selected

selected는 구성 요소 외부에서 이 이벤트를 구독하여 반환되는 값을 얻을 수 있습니다. 이 값은 구성요소가 현재 선택한 모든 지역이며, 반환된 값은 지역 데이터를 포함하는 여러 개체로 구성된 배열이며, 데이터 구조는 면적 매개변수

간단한 예

<p>
  <addressmap :area="area" @selected="selected"></addressmap>
</p>

Installation과 동일합니다. use

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

노드를 사용하여 크롤러 기능을 구현하는 방법

Vue.js 코드 최적화 방법 요약

Node.js에서 Koa를 사용하여 사용자 인증을 구현하는 방법

위 내용은 Vue 영역 선택 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!