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>
