VUE多個組件示例
示例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多個組件示例</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
Vue.component('app-header', {
template: `<div class="header"><h1>頭部組件</h1></div>`,
})
Vue.component('app-main', {
template: `<div class="main">
<ul>
<li>用戶管理</li>
<li>賬單管理</li>
<li>供應商管理</li>
</ul>
</div>`,
})
Vue.component('app-footer', {
template: `<div class="footer"><h1>底部組件</h1></div>`,
})
// 定義局部組件對象
const ComponentB = {
template: '<div>這是 {{name}} </div>',
data() {
return {
name: '局部組件'
}
},
}
new Vue({
el: '#app',
components: {
// key:value ; key為組件名，value是組件對象。
'component-b': ComponentB
},
data: {
}
})
</script>
</body>
</html>
示例二
將每個組件存放進單獨的 js 文件中去。
在html文件同級創建一個component文件夾，創建三個js文件，分別為Header.js、Main.js、Footer.js，並且將創建的組件分別放入對應的文件中。
Header.js
Vue.component('app-header', {
template: `<div class="header"><h1>頭部組件</h1></div>`,
})
Main.js
Vue.component('app-main', {
template: `<div class="main">
<ul>
<li>用戶管理</li>
<li>賬單管理</li>
<li>供應商管理</li>
</ul>
</div>`,
})
Footer.js
Vue.component('app-footer', {
template: `<div class="footer"><h1>底部組件</h1></div>`,
})
父組件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多個組件示例</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-main></app-main>
<app-footer></app-footer>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="component/Header.js"></script>
<script src="component/Main.js"></script>
<script src="component/Footer.js"></script>
<script>
// 定義局部組件對象
const ComponentB = {
template: '<div>這是 {{name}} </div>',
data() {
return {
name: '局部組件'
}
},
}
new Vue({
el: '#app',
components: {
// key:value ; key為組件名，value是組件對象。
'component-b': ComponentB
},
data: {
}
})
</script>
</body>
</html>
