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>

 

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