Vue3で複数コンポーネント表示
Vue.js ver3で複数コンポーネントを表示する方法
index.html
<div id="app">
<my-header></my-header>
<p>コンテンツ</p>
<my-footer></my-footer>
</div>
<script src="https://unpkg.com/vue@3.0.0/dist/vue.global.js"></script>
<script src="my-header.js"></script>
<script src="my-footer.js"></script>
<script src="main.js"></script>
my-header.js
const myHeader = {
template: '<p>ヘッダーです</p>',
}
my-footer.js
const myFooter = {
template: '<p>フッターです</p>',
}
main.js
Vue.createApp({
data: function () {
return {}
},
components: {
'my-header': myHeader,
'my-footer': myFooter
}
}).mount('#app')
この記事が気に入ったらサポートをしてみませんか?