Vue 컴포넌트란 무엇인가요?

Vue에서 구성 요소는 재사용 가능한 Vue 인스턴스입니다. 이는 고유한 구성 요소 이름을 가지며 구성 요소 이름을 사용자 정의 HTML 태그로 사용할 수 있습니다. 구성 요소는 코드 재사용을 크게 향상시킬 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

컴포넌트란 무엇인가요?

Component는 재사용 가능한 Vue 인스턴스로, HTML 요소를 확장하고 구성 요소 이름을 사용자 정의 HTML 태그로 사용할 수 있습니다. 구성 요소는 재사용 가능한 Vue 인스턴스이기 때문에 데이터, 계산, 조사식, 메서드 및 수명 주기 후크와 같은 new Vue()와 동일한 옵션을 받습니다. 유일한 예외는 el과 같은 루트 인스턴스별 옵션입니다.

일부 공통 모듈을 추출하여 별도의 도구 구성 요소나 페이지에 작성한 다음 필요한 페이지로 직접 가져오기만 하면 됩니다. 그런 다음 재사용을 위한 구성 요소로 추출할 수 있습니다.

예를 들어 페이지 헤더, 측면, 콘텐츠 영역, 꼬리, 업로드된 사진 등을 여러 페이지에서 동일한 것을 사용하는 경우 구성 요소로 만들 수 있으므로 코드 재사용률이 향상됩니다.

Vue 구성 요소 사용

디렉토리에 대해 먼저 이야기해 봅시다

1. 구성 요소 B.vue를 만듭니다

S 마찬가지로, New A hello_word .vue를 부모로

그러면 다음과 같은 결과가 표시됩니다

핵심 사항:

hello_word.vue에 B.vue 모듈을 소개합니다. // import showB from './B .vue' 컴포넌트 소개

B 파일의 사용자 정의 모듈 이름 showB

컴포넌트 등록

 components:{
          showB,        
        },
<showB /> //使用组件

참고: 다음과 같이 낙타 표기로 구성 요소 이름을 정의합니다. ：PascalCase 사용 kebab-case 사용

기본 주제 props로 이동하기 시작하세요

상위 구성 요소는 값을 하위 구성 요소에 전달합니다(상위 구성 요소는 다음과 같은 데이터를 바인딩합니다. value="시간입니다. to work", 하위 컴포넌트는 props Get)을 전달합니다.
하위 컴포넌트의 props 옵션은 상위 컴포넌트로부터 데이터를 받을 수 있습니다. 맞습니다. Prop은 단방향으로만 바인딩됩니다. 즉, 상위 구성 요소에서 하위 구성 요소로만 전달할 수 있으며 반대 방향으로는 전달할 수 없습니다.
사용법은 다음과 같습니다.

B 컴포넌트

부모 컴포넌트

그러면 페이지가 표시됩니다.

생성된 결과의 값을 인쇄합니다. ,

하위 컴포넌트는 상위 컴포넌트에 값을 전달합니다

하위 컴포넌트에서:

<p @click="chuanzhi">回复父组件</p>
chuanzhi() {
            this.$emit(&#39;msg&#39;, &#39;知道了知道了&#39;) //执行 msg 函数并把要改变的值作为参数带过去
        }

상위 컴포넌트:

DOM에 @msg='msg'를 소개

<showB :value=&#39;text&#39; @msg=&#39;msg&#39;/> 
 msg(val){
                 console.log(val,&#39;val&#39;)
                 }

를 통해 수신 메소드

실행, 상위 구성요소에 응답하려면 클릭

인쇄 결과:

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 학습을 방문하세요! !

위 내용은 Vue 컴포넌트란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!