Vue自定义公共组件及提取公共的方法

vue自定义公共组件

我们在编写页面的时候,会存在公共的组件,比如头部和底部菜单

我们拿公共头部为例子,想在每个页面都显示公共头部的实现方式有两种：

在src/components目录创建目录 common, 再创建header.vue

header.vue

<template>

  <div>

  <h1>header in here</h1>

  </div>

 </template>

 <script>

  export default{}

 </script>

1.全局挂载组件

• 在main.js里挂载

import headerTop from "xxx/components/common/header" //引入组件
//第一个参数表示 head-view标签的内容都用第二个参数headerTop来代替
 Vue.component("head-view",headerTop);
 
//然后在需要使用的vue文件中引入头部的话,只需要加入 <head-view></head-view>标签//

• 组件局部引入,需要用的时候才引入使用

 //在需要使用的VUE文件中引入头部:
 <template>

 <headerTopNav></headerTopNav>

 </template>


 <script>

import headerTopNav from 'xxx/components/common/header' //引入组件

 export default{

 components: {headerTopNav} //表示headerTopNav标签的内容被headerTopNav组件代替

 }

 </script>

vue 提取公共的方法

• 创建文件夹 以及 JS文件 用来存放公共的方法
  
  
  common.js 文件中内容如下

const commonData = () => {
	console.log('我是公共的方法')
}
export { commonData }

全局使用：

① 在 main.js 文件中全局引入，并在 vue 的原型链 (prototype) 中注册

// 引入 common.js
import { commonData } from './utils/common.js'
// 将 common 配置给 Vue 的 $common 成员
Vue.prototype.$commonData = commonData

然后在需要用到该方法的组件文件中使用，如下图

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    this.$commonData();
  }
};
</script>

<style lang="less" scoped>
</style>

② 在需要用到该方法的组件文件中局部引用

import { commonData } from '../utils/common.js'
<script>
export default {
	created() {
    	commonData();
  	}
};
</script>