vue에서 전역 구성 요소와 로컬 구성 요소를 이해하는 방법

Vue의 글로벌 컴포넌트는 애플리케이션 어디에서나 사용할 수 있는 컴포넌트를 의미하고, 로컬 컴포넌트는 글로벌 컴포넌트에 등록되지 않아 로컬에서만 사용할 수 있는 컴포넌트를 의미합니다.

Vue에서 컴포넌트의 출현은 Vue 인스턴스의 코드 볼륨을 분할하는 것입니다. 다양한 기능 모듈을 여러 컴포넌트로 나누어 보겠습니다. 코드에서는 필요한 기능이 무엇이든 해당 구성 요소를 호출할 수 있습니다. 다음으로 글로벌 컴포넌트와 로컬 컴포넌트의 차이점을 소개하겠습니다. 이는 특정 참조 효과가 있으며 모든 사람에게 도움이 되기를 바랍니다.

【추천 튜토리얼: Vue Tutorial】

전역 컴포넌트는 다른 컴포넌트를 포함하여 애플리케이션 내 어디에서나 사용할 수 있는 컴포넌트를 말합니다.

로컬 컴포넌트는 컴포넌트를 말합니다. 글로벌 컴포넌트에 등록되지 않았기 때문에 이를 등록한 컴포넌트에서만 사용할 수 있습니다.

예:

<div id="app">
	<contact-us></contact-us>
</div>

Vue.component('contact-us', {	data: function() {		
return {			
email: 'info@mycompany.com'
		};
	},
	template: `
		<div>
			<h1>Contact Us</h1>
			<p>Please send an e-mail to: {{ email }}</p>
		</div>
	`});new Vue({	el: &#39;#app&#39;,});

위 코드의 컴포넌트는 글로벌 Vue에서 컴포넌트 메소드를 사용하기 때문에 실제로는 글로벌 컴포넌트입니다. 개체를 등록합니다. 이는 우리가 원하는 대로 사용할 수 있음을 의미합니다.

전역 구성 요소를 로컬 구성 요소로 설정하는 방법

먼저 구성 요소 개체를 변수에 저장합니다

var contactUs = {	data: function() {		
return {			
email: 'info@mycompany.com'
		};
	},
	template: `
		<div>
			<h1>Contact Us</h1>
			<p>Please send an e-mail to: {{ email }}</p>
		</div>
	`};

그런 다음 Vue 인스턴스에서 로컬로 등록하려는 구성 요소가 포함된 구성 요소 속성을 추가할 수 있습니다. 이 속성은 객체여야 하며 태그 이름과 구성 객체의 키-값 쌍을 포함해야 합니다.

new Vue({	
el: '#app',	
components: {		
'contact-us': contactUs
	}});

이 예에서는 구성 요소 속성이 Vue 인스턴스에 추가되었지만 다른 구성 요소에도 추가될 수 있습니다.

코드를 실행하면 구성 요소가 정상적으로 작동하는 것을 볼 수 있습니다. 그러나 구성 요소가 전역이 아닌 로컬임을 증명하기 위해 다른 Vue 인스턴스가 추가되고 기존 인스턴스의 선택기가 변경됩니다.

new Vue({	
el: '#app1',	
components: {		
'contact-us': contactUs
}});new Vue({	el: '#app2',});

<div id="app1">
	<contact-us></contact-us>
</div>
<div id="app2">
	<contact-us></contact-us>
</div>

템플릿에서 태그를 두 번 사용했지만 이제 연락처 구성 요소는 한 번만 렌더링됩니다.

로컬 구성 요소로 등록했기 때문에 첫 번째 Vue 인스턴스에 나타나지만 두 번째 Vue 인스턴스는 마크업으로 무엇을 해야할지 모릅니다. 브라우저 콘솔을 확인하면 구성 요소가 등록되지 않았다는 오류가 표시됩니다. 따라서 전역 구성 요소를 등록하려면 Vue.comComponent 메서드를 사용하거나 Vue 인스턴스의 구성 요소 속성을 사용해야 합니다. 다른 구성 요소.

요약: 위 내용은 이 글의 전체 내용입니다. 모든 분들께 도움이 되었으면 좋겠습니다.

위 내용은 vue에서 전역 구성 요소와 로컬 구성 요소를 이해하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!