Vue.js 구성 요소 사용 및 개발 예제 튜토리얼

구성 요소

구성 요소는 HTML 요소를 확장하고 재사용 가능한 코드를 캡슐화할 수 있으며, vue.js의 컴파일러는 일부 경우에 구성 요소에 특수 기능을 추가할 수 있습니다. 또한 is 속성으로 확장된 기본 HTML 요소의 형태여야 합니다.

Vue.js 구성 요소는 사전 정의된 동작을 갖춘 ViewModel 클래스로 이해될 수 있습니다. 구성 요소는 많은 옵션을 미리 정의할 수 있지만 핵심 옵션은 다음과 같습니다.

템플릿(템플릿): 템플릿은 최종적으로 사용자에게 표시되는 데이터와 DOM 간의 매핑 관계를 선언합니다.

초기 데이터(data): 컴포넌트의 초기 데이터 상태입니다. 재사용 가능한 구성 요소의 경우 일반적으로 비공개 상태입니다.

외부 매개변수(props) 허용: 매개변수를 통해 구성요소 간에 데이터가 전송되고 공유됩니다. 매개변수는 기본적으로 단방향(하향식)으로 바인딩되지만 양방향으로 명시적으로 선언할 수도 있습니다.

메서드: 데이터에 대한 수정 작업은 일반적으로 구성 요소의 메서드 내에서 수행됩니다. 사용자 입력 이벤트 및 구성 요소 메서드는 v-on 지시문을 통해 바인딩될 수 있습니다.

수명 주기 후크: 구성 요소는 생성, 연결, 삭제 등과 같은 여러 수명 주기 후크 기능을 트리거합니다. 이러한 후크 함수에서는 일부 사용자 정의 논리를 캡슐화할 수 있습니다. 기존 MVC와 비교하면 컨트롤러의 로직이 이러한 후크 기능으로 분산되어 있다는 것을 이해할 수 있습니다.

전용 리소스(자산): Vue.js에서는 사용자가 정의한 명령어, 필터, 구성 요소 등을 총칭하여 리소스라고 합니다. 전역적으로 등록된 리소스는 쉽게 이름 충돌을 일으킬 수 있으므로 구성 요소는 자체 개인 리소스를 선언할 수 있습니다. 개인 리소스는 구성 요소와 해당 하위 구성 요소에 의해서만 호출될 수 있습니다.

또한 동일한 구성 요소 트리 내의 구성 요소는 내장된 이벤트 API를 통해 통신할 수도 있습니다. Vue.js는 구성 요소 정의, 재사용 및 중첩을 위한 완전한 API를 제공하므로 개발자는 구성 요소를 사용하여 빌딩 블록과 같은 전체 애플리케이션 인터페이스를 구축할 수 있습니다.

구성 요소는 코드의 효율성, 유지 관리성 및 재사용성을 크게 향상시킵니다.

컴포넌트를 사용하여 등록

1. 컴포넌트 생성자 생성:

var MyComponent = Vue.extend({
//选项
})

2 . 생성자를 구성 요소로 사용하고 Vue.comComponent(tag,constructor)에 등록합니다:

Vue.component('my-component',MyComponent)

3. , 자체적으로 사용하십시오.

<div id = "example">
<my-component></my-component>
</div>

예:

<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: &#39;<div>A custom component!</div>&#39;
})
// 注册
Vue.component(&#39;my-component&#39;, MyComponent)
// 创建根实例
new Vue({
el: &#39;#example&#39;
})

은 다음과 같이 렌더링됩니다.

<div id = "example">
<div>A custom component!</div>
</div>

구성 요소의 템플릿은 사용자 정의 요소를 대체합니다. 장착 지점으로. 교체 여부를 결정하려면 인스턴스 옵션 교체를 사용할 수 있습니다.

로컬 등록

인스턴스 옵션 컴포넌트로 등록합니다. 각 컴포넌트를 전역적으로 등록할 필요는 없습니다.

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
&#39;my-component&#39;: Child
}
})

이 캡슐화는 지시어, 필터, 전환과 같은 다른 리소스에도 적용됩니다.

등록 구문 설탕

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: &#39;<div>A custom component!</div>&#39;
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
&#39;my-component&#39;: {
template: &#39;<div>A custom component!</div>&#39;
}
}
})

구성 요소 옵션 문제

Vue 생성자에 전달된 대부분의 옵션은 또한 Vue.extend()에서는 data와 el 외에도 단순히 객체를 data 옵션으로 Vue.extend()에 전달하면 모든 인스턴스가 동일한 데이터 객체를 공유하므로 함수를 data 옵션을 선택하면 이 함수가 새 개체를 반환하도록 합니다.

var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})

템플릿 구문 분석

Vue의 템플릿은 다음을 사용하는 DOM 템플릿입니다. 브라우저의 기본 템플릿 파서이므로 유효한 HTML 조각이어야 합니다. 일부 HTML 요소에는 내부에 배치할 수 있는 요소에 대한 제한이 있습니다.

a는 다른 대화형 요소(예: 버튼, 링크)를 포함할 수 없습니다. )

ul 및 ol은 li만 직접 포함할 수 있습니다.

select는 option과 optgroup만 포함할 수 있습니다.

table은 thead, tbody, tfoot, tr, caption, col만 직접 포함할 수 있습니다. , colgroup

tr은 th와 td만 직접 포함할 수 있습니다

실제로 이러한 제한으로 인해 예상치 못한 결과가 발생할 수 있습니다. 간단한 경우에는 작동할 수 있지만 브라우저가 유효성을 검사하기 전에는 사용자 정의 구성 요소의 확장 결과에 의존할 수 없습니다. 예를 들어

...는 my-select 구성 요소가 결국 다음으로 확장되더라도 유효한 템플릿이 아닙니다. <선택>...

또 다른 결과는 맞춤 태그(,