一、步骤一：组件的构建（组件的命名用驼峰命名法，或者短横线分隔命名）
方法一：extend构建
使用Vue构造器，创建一个“子类”，参数是一个包含组件选项的对象，其中,data选项中必须是函数
var author = Vue.extend({
template: "<p><a :href='url'>{{author}}</a></p>",
data : function() {
return {
author : 'vamous',
url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
}
}
});
方法二：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'){
localStorage.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>