Vue自己写组件——Demo详细步骤

公司近期发力，同时开了四五个大项目，并且都是用Vue来做的，我很荣幸的被分到了写项目公用模块的组，所以需要将公用的部分提取成组件的形式，供几个项目共同使用，下面详细讲一下写Vue组件的具体步骤。

 

一、创建组件文件

 

 假如几个项目共用一个头部组件header，我们先建立所需要的文件：header.vue 存放header的模板等内容，index.js 是编写header组件的js文件

 

二、编写组件模板文件

 

//这里是header.vue文件
<template>
  <div class="header">
     我是header模板........
  </div>
</template>

<script>
    export default{
        name: '',
        data(){
            return {}
        }
    }
</script>
<style>
</style>

 

三、编写组件文件

 

// 这里是index.js文件
import myHeader from './header'　　//  ./表示当前目录，header表示header.vue（自动补全后缀）

const Header = {
  install : function(Vue){
    Vue.component('ele-header', myHeader)
  }
}

export default Header

 

首先导入模板文件header.vue定义为变量myHeader准备使用，接着通过install方法注册组件（组件必须先注册，后使用，否则会报错）

install方法表示 在main.js（项目的入口文件，也可能是 entry.js等等）中，如果使用Vue.use()方法的话，则会默认调用 install方法

调用install方法后，会通过Vue.component()方法全局注册该组件，注册完成后我们的组件就可以使用了。

 

// 这里为基础薄弱的同学附上Vue.component方法的使用说明
// Vue.component(组件在HTML文件中使用时的标签名称, template)

// 注册模板
Vue.component('header', {
　　template: '<div class="header">hello world</div>'
})

// 使用模板
<div id="container">
　　<header></header>
</div>

// F12查看<header>元素的解析结果
<div class="header">hello world</div>

// 页面展示
hello world

 

四、在项目中引入组件

 

webpack首先会加载项目入口文件，这里是main.js，然后根据各种import去寻找相应的文件依赖并将文件加载进来，所以我们在main.js里面引入组件

// 这里是项目入口文件main.js
import Vue from 'vue'
import App from './app.vue'

// 引入header组件 index.js是组件的默认入口
import Header from './components/header/index'
// Vue.use()方法会触发index.js中的install方法
Vue.use(Header);

new Vue({
  el: '#app',　　// 挂载项目
  components: { App }
})

 

五、使用组件

 

// 这里是app.vue文件，项目挂载在#app元素下，所以header组件必须在该元素内部使用
<template>
  <div id="app">
    <ele-header></ele-header>
  </div>
</template>

 

至此，组件的创建、注册、使用就完成了。