Vue项目中components组件(模板)的使用
在web项目开发过程中,我们经常会遇到重复代码结构,比如页面的头部、底部等,通常我们都是作为模板或者公共文件进行设计使用,在vue中,我们可以使用components组件(模板)来实现。下面我们按步骤实现组件的使用。第一步:创建组件vue文件我们在src目录中的视图view目录中,创建组件目录,如header,再在header目录下创建header.vue文件,作为组件文件,在header.vue
·
在web项目开发过程中,我们经常会遇到重复代码结构,比如页面的头部、底部等,通常我们都是作为模板或者公共文件进行设计使用,在vue中,我们可以使用components组件(模板)来实现。下面我们按步骤实现组件的使用。
第一步:创建组件vue文件
我们在src目录中的视图view目录中,创建组件目录,如header,再在header目录下创建header.vue文件,作为组件文件,在header.vue中加入所需元素。
第二步:引入组件文件
在需要引入组件的vue文件中引入组件文件,如在index.vue中引入header.vue
import header from '@/views/header/header'
第三步:注册组件
我们在index.vue文件中的script部分,找到export default ,在里面写入注册代码
components: {
'my-header': header
}
第四步:应用组件
在index.vue的代码部分,应用header组件
<my-header></my-header>
更多推荐
已为社区贡献2条内容
所有评论(0)