VUE多个组件示例
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>
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录，论点和观点仅代表个人而不代表技术的真理，目的是自我学习和有幸成为可以向他人分享的经验，因此有错误会虚心接受改正，但不代表此刻博文无误！
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V ：https://gitee.com/wjw1014
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
2018-07-28 小程序动态控制元素显隐