이 글은 주로 vue.js 인스턴스 객체 + 컴포넌트 트리 관련 정보를 소개하고 있으니, 필요한 친구들이 참고하시면 도움이 될 것 같습니다.
vue의 인스턴스 객체
먼저 js
el의 새 키워드를 사용하여 vue를 인스턴스화합니다. 페이지에서 vue 구성 요소나 객체가 로드되는 위치, ID나 클래스 또는 태그 이름으로 로드할 수 있습니다.
template : 로드된 콘텐츠입니다. 지침이나 기타 구성 요소가 포함된 HTML 코드/HTML 조각, 템플릿은 우리가 사용하는 템플릿입니다
**데이터:** 데이터는 데이터를 통해 구성 요소에 도입됩니다.
구성 요소의 데이터는 함수 형식으로 데이터를 반환해야 합니다. .다른 인터페이스가 동일한 구성 요소를 사용할 때 한 구성 요소의 값이 변경되고 다른 페이지의 내용이 변경되는 것으로 생각되지 않습니다.
{{ }} 이중 괄호 구문에 데이터 변수를 넣습니다.
구성 요소 등록 구문 설탕
전역 구성 요소
A 메서드:
Vue.extend() 메서드를 호출하여 구성 요소 생성자를 만듭니다.
Vue 호출 .comComponent(컴포넌트 라벨, 컴포넌트 생성자) 메소드는 컴포넌트를 등록합니다
컴포넌트는 Vue 인스턴스
/*A方法全局组件1:*/ //1.Vue.extend() 创建组件构造器 var mycomponent = Vue.extend({ /*组件内容*/ template:…… , data: …… }) //2.Vue.component注册组件 Vue.component('my-component1', mycomponent);
B 메소드의 범위 내에서만 사용할 수 있습니다(A 메소드와 동일, 간단한 작성 방법입니다) ):
A 메소드가 없습니다. 첫 번째 단계는 Vue.comComponent(레이블 이름, 옵션 객체) 메소드를 직접 호출하는 것입니다
/*B方法 全局组件2:*/ Vue.component('my-component2', { /*组件内容*/ template:…… , data: …… } /*在html中的组件调用,把组件标签直接用在html中相应的位置即可*/ <mycomponent1></mycomponent1> <mycomponent2></mycomponent2>
로컬 컴포넌트는 Components 속성을 사용합니다
"javascript var partcomponent2 = { el:…… , data: { …… } } new Vue({ el: '#app', data: { …… }, components: { /* A方法: 局部组件1 / 'part-component1': partcomponent1 }, /B方法 局部组件2 */ 'part-component2':{ el:…… , data: { …… } } }) "
SubcomComponent
생성 방법은 다음과 유사합니다. 위의 두 가지 방법의 차이점은 위치가 구성 요소 내부에 배치된다는 것입니다.
var compentChild ={ el:……, data:…… } component: { el: ……, data: {……} components: { 'component-child': componentChild } }
내장 구성 요소
구성 요소에서 구성 요소를 선언할 필요가 없습니다. 대신 태그를 직접 사용하세요. 예를 들어 아래와 같이 myHeader에 내장 컴포넌트를 사용한다면 root-view, keep-alived 등도 Vue 자체에서 제공하는 내장 컴포넌트입니다.
var myHeader = { template: '<component></component> <root-view></rooot-view>' }
관련 권장 사항:
vue.js 하위 구성 요소를 호출하는 상위 구성 요소의 내부 메서드 공유
Vue.js_vue의 *.Vue 파일에 대한 첫 소개. js
위 내용은 vue.js 인스턴스 개체 및 구성 요소 트리 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!