vue-cli构建项目中组件的使用
在使用vue-cli脚手架构建项目时,组件的使用步骤大致是:创建组件component,编写模板template,抛出组件给项目export,引入组件import,抛出组件给页面export。
一、创建组件
在componets文件夹里创建新的组件文件newVue.vue,注意后缀名为.vue
注意:组件名称不能使用html的自有标签或javascript的关键字,例如:head.vue,new.vue这样的组件名称是不符合规范的,加载的时候也会出现问题。
二、编写组件内的模板内容和样式
1 | template是模板的意思,模板内容就是组件将展示的具体内容 |
1 2 3 | <template> <div>这里是模板内容</div> </template> |
<style scoped>
//这里可以编写样式
</style>
注意:模板内容只能有一个顶层html标签,例如:上面代码里将div作为顶层标签,那么所有的模板内容都必须写在这个div内部
三、抛出组件给vue项目
通过export将组件抛出给vue项目,并将组件命名为newVue
1 2 3 4 5 6 7 8 9 10 11 12 13 | <template> <div>这里是模板内容</div> </template> <script> export default { name: 'newVue' } </script> <style scoped> </style> |
四、引入组件到主组件,并将引入的组件抛出给主组件
import newVue from '@/components/newVue'
通过import引入组件,再通过export将引入的组件抛出给主组件,抛出多个组件用逗号隔开即可
主组件就可以通过自定义标签调用:
1 | <newVue></newVue> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <template> <div id= "app" > <newVue></newVue> <router-view/> </div> </template> <script> import newVue from '@/components/newVue' export default { components:{ newVue } } </script> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步