一、步骤一：组件的构建（组件的命名用驼峰命名法，或者短横线分隔命名）
办法一：extend 构建
应用 Vue 结构器，创立一个“子类”，参数是一个蕴含组件选项的对象，其中,data 选项中必须是函数
var author = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
办法二：template 标签构建法
template 标签构建，需在标签上加 id 属性用以前期注册
<template id=”myCom”>
<div> 这是 template 标签构建的组件 </div>
</template>
办法三：template 标签构建法 (能够把组件作为独自的一个 *.vue 文件寄存，用时用 import 引入）
<template>
<div> 这是 template 标签构建的组件 </div>
</template>
<script>
import bus from '../common/bus';
export default {data() {
return {
collapse: false,
fullscreen: false,
name: 'linxin',
message: 2
}
},
computed:{username(){let username = localStorage.getItem('ms_username');
return username ? username : this.name;
}
},
methods:{
// 用户名下拉菜单抉择事件
handleCommand(command) {if(command == 'loginout'){www.pizei.comlocalStorage.removeItem('ms_username')
this.$router.push('/login');
</script>
二、步骤二：组件的注册
(1) 全局注册
一次注册，可在多个 vue 实例中应用，需调用 Vue.component() 办法，这个办法需传 2 个参数，第一个参数为组件名称，第二个参数为组件结构时定义的变量。
咱们先用全局注册注册下面例子中创立的 myCom 组件
Vue.component(‘my-com’,myCom)
还有一种不需构建间接注册的写法——注册语法糖
Vue.component(‘my-com’,{
'template':'<div> 这是我的组件 </div>'})
‘my-com’ 为给组件自定义的名字，在应用时会用到，前面 myCom 对应的就是下面构建的组件变量。
留神命名标准，个别组件名字以短横线分隔或一个小写单词。例：footer-nav，footernav
如果是用 template 及 script 标签构建的组件，第二个参数就改为它们标签上的 id 值
Vue.component(‘my-com’,{
template: '#myCom'})
(2) 部分注册
只能在注册该组件的实例中应用
var app = new Vue({
el: '#app',
components: {'my-com': myCom}})
注册语法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {template: '<div> 这是我的组件 </div>'}
}})
template 及 script 构建的游戏组件
var app = new Vue({
el: '#app',
components: {
'my-com': {template: '#myCom'}
}})
三、步骤三：组件的应用
咱们只需在须要调用组件的中央写上组件名字的标签即可
<div>
/* 调用组件 */
<my-com></my-com></div>