JavaScript/Vue
인스턴스 유효 범위와 지역 컴포넌트, 전역 컴포넌트 간 관계
코딩하는 붕어
2022. 6. 5. 02:25
반응형
<!DOCTYPE html>
<head>
<title>Vue Component Registration</title>
</head>
<body>
<div id="app">
<h3>첫 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<hr>
<div id="app2">
<h3>두 번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('my-global-component', {
template: '<div>전역 컴포넌트입니다.</div>'
})
var cmp = {
template: '<div>지역 컴포넌트입니다.</div>'
}
new Vue({
el: '#app',
components: {
'my-local-component': cmp
}
})
new Vue({
el: '#app2',
})
</script>
</body>
</html>
두 번째 인스턴스 영역에는 '지역 컴포넌트입니다.' 라는 문구가 뜨지 않았다.
왜냐하면 지역 컴포넌트는 새 인스턴스를 생성할 때마다 등록을 해 줘야 하기 때문이다.
반응형