在项目开发过程中,我们经常会遇到重复代码结构,比如页面的头部、底部等,通常我们都是作为模板或者公共文件进行设计使用,在vue中,我们可以使用components组件(模板)来实现。下面我们按步骤实现组件的使用
第一步:创建组件vue文件
我们在src目录下的创建一个components文件夹,可以在这个文件夹下创建文件,如Header.vue, Aside.vue等等
第二步:在要引入的.vue代码中中引入组件文件
import Aside from "@/components/Aside";
import Header from "@/components/Header";
第三步:注册组件
第四步:应用组件
这是不传值的时候
<Aside></Aside>
<Header></Header>
想要了解组件传值传方法的话看看这个
或者:
引入:
import header from '@/views/header/header'
注册:
components: {
'my-header': header
}
应用:
<my-header></my-header>
标签:vue,header,传值,components,组件,模板 From: https://www.cnblogs.com/lipu123/p/17062310.html