728x90
Vue.component 메서드로 등록하면 모든 컴포넌트에서 사용할 수 있음
메서드의 매개변수로 전달되는 것
(사용자 정의 태그로 사용할 이름, 컴포넌트의 옵션 객체)
Vue.component('comp-child', {
template: '<p>MyComponent</p>'
});
var app = new Vue({
el: '#app',
});
등록한 컴포넌트를 사용하려면 부모가 되는 컴포넌트의 템플릿에 사용자 정의 태그(컴포넌트 태그)를 작성함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Vue.js App</title>
<link href="main.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script src="./js/main.js"></script>
</body>
</html>
728x90
'Vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트를 리스트 렌더링하기 v-for (0) | 2024.01.21 |
|---|---|
| [Vue.js] 컴포넌트 통신 (0) | 2024.01.19 |
| [Vue.js] 컴포넌트 정의 타이밍 (0) | 2024.01.19 |
| [Vue.js] 이미지 파일 (0) | 2024.01.18 |
| [Vue.js] input 입력 핸들링 v-model, 체크박스,radio, select (0) | 2024.01.18 |
