๋ฐ์ํ
<!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>
๋ ๋ฒ์งธ ์ธ์คํด์ค ์์ญ์๋ '์ง์ญ ์ปดํฌ๋ํธ์ ๋๋ค.' ๋ผ๋ ๋ฌธ๊ตฌ๊ฐ ๋จ์ง ์์๋ค.
์๋ํ๋ฉด ์ง์ญ ์ปดํฌ๋ํธ๋ ์ ์ธ์คํด์ค๋ฅผ ์์ฑํ ๋๋ง๋ค ๋ฑ๋ก์ ํด ์ค์ผ ํ๊ธฐ ๋๋ฌธ์ด๋ค.
๋ฐ์ํ
'JavaScript > Vue' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์์์์ ํ์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ ์ ๋ฌํ๊ธฐ : props (0) | 2022.06.05 |
|---|---|
| ์ปดํฌ๋ํธ ๊ฐ ํต์ ๊ณผ ์ ํจ ๋ฒ์ (0) | 2022.06.05 |
| Component (0) | 2022.06.05 |
| Vue Instance Lifecycle (0) | 2022.06.05 |
| vue ๊ณต๋ถ (0) | 2022.05.15 |
๋๊ธ