vue 中有很多好用的东西,比如说我们在编写代码的时候,头部都是一样的,这个就可以用到公共组件这一块了,
废话不多说,直接上代码
1.我们要在项目目录下创建一个common的文件,当作公共文件使用,里面新建一个head.vue;
<template>
<div>
<h1>header in here</h1>
</div>
</template>
<script>
export default{}
</script>
<1.全局引用 挂载组件
// 在main.js里挂载,通过Vue.component方式
import headerTop from "xxx/components/common/header" //引入组件
Vue.component("head-view",headerTop);
//第一个参数表示 head-view标签的内容都用第二个参数headerTop来代替
然后在需要使用的vue文件中引入头部的话,只需要加入 标签
<2.局部引入,需要用的时候才引入使用
在需要使用的VUE文件中引入头部:
代码片段
<template>
<header_top ></header_top >
</template>
<script>
import header_top from 'xxx/components/common/header' //引入组件
export default{
components: {header_top } //表示header标签的内容被header_top 组件代替
}
</script>
前端小白—的爬坑之路 ,如有不对之处请多指教