Vue 구성 요소를 덮어쓰는 방법
이번에는 Vuetify
VAutocomplete의 새로운 검색 기능을 사용할 때의 소재다.규격.
새로 제작된 검색 기능은 다음과 같다.
VAutocomplete
이것은 입력을 통해 코일을 선택할 수 있는 구성 요소입니다.
샘플의 움직임을 보고 이번 시행에 적합하다고 판단해 사용하기로 했다.
빈 입력
일본어 검색이 가능한 외부 서비스를 이용해 별도로 제작된 API의 응답 동적 설정
items을 어느 정도 간단하게 구현할 수 있다.API 측에서 축소
no-filter했기 때문에 프론트 데스크의 축소는 취소되었다(히라가나를 입력할 때 튀어나오기 때문이다)잘 설치되어 있지만 입력할 때마다 검색 창이 비어 있습니다.
search-input로 설정하여 검색 창의 입력을 복원한 후
키워드 검색 결과 페이지에서 키워드가 검색창에 들어가려고 하는 바람에 곤란해졌다.
실복을 보다
선택하지 않으면 입력
nullsetSearch이 초점에서 벗어날 때updateSelf라고 부른다.나는 초점이 멀어져도 텅 비어서는 안 된다고 생각한다.
평소에 React를 사용하기 때문에 Vue로 구성 요소를 확장하는 방법을 잘 모르겠지만, Vuetify의'흔한 문제'에 원하는 답이 있습니다!
Vuetify 구성 요소를 확장하려면 어떻게 해야 합니까?
Vuetify 구성 요소는 vue에서 extends 옵션을 사용하여 간단하게 확장할 수 있습니다.
extends 옵션
이것
extends은 VueComponentOptions에서 정의된 것이기 때문에 Vuetify 이외에도 사용할 수 있으나 Google 검색에서는 거의 사용할 수 없는 예입니다.이것을 사용하면 다음과 같은 오버라이드
setSearch를 통해 비어있는 동작을 멈출 수 있습니다.import { VAutocomplete } from 'vuetify/lib'
export default {
extends: VAutocomplete,
methods: {
setSearch() {}
}
}
exted를 통한 확장
다시 해보면
extends 옵션을 사용하지 않아도 똑같은 일을 할 수 있다는 것을 알게 된다.import { VAutocomplete } from 'vuetify/lib'
export default VAutocomplete.extend({
setSearch() {}
})
이번처럼 구성 요소 라이브러리를 사용하면 내부 동작을 조금 바꾸기 위해 미리 기억할 수 있습니다.
🔔 직원 모집
온라인 가정교사 서비스 "ManaLink"에서 엔지니어를 모집하고 있습니다!
2020년에 발매되는데 더 많은 서비스를 함께 개발해 볼까요?
개발한 기능은 온라인 멘토링의 현장에서 바로 활용될 수 있어 멘토링 과정의 최적화와 연결된 환경이다.
특히 테스트 코드를 작성하고 엔지니어를 주도로 품질을 보호하며 신기술의 학습과 출력을 중시하며 기술 수준을 고려하지 않는다.
이런 맥락에서 세부적인 기술 경험이 있느냐 없느냐보다 앞으로 어떤 엔지니어가 돼 여가 면담에 적극적으로 나설 수 있기를 기대한다.
일단 한 번 얘기 안 해요?다음은 Meety에게 문의하세요!
최근 모집 요점은 다음과 같이 요약된다.다만 최근 공모를 위해 사업 쪽에 관심이 있다면 중장기적인 연계도 환영한다.당신의 연락을 기대합니다!
Reference
이 문제에 관하여(Vue 구성 요소를 덮어쓰는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/manalink/articles/manalink-extends-vue-component텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
