vue组件（全局，局部，动态加载组件）

vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。

one----全局组件引入写法：在项目的main.js中：

  第一种，在main.js直接写template：' 模版字符串'

Vue.component('tab-home', { template: `<div>Home component</div>`

})

Vue.component('tab-posts', { template: `<div>Posts component</div>`

})

Vue.component('tab-archive', { template: `<div>Archive component</div>`

})

第二种，分别写tab-home.vue Tab-Posts'.vue  Tab-Archive'.vue然后import  TabHome from ‘ Tab-Home.vue  ’

     Vue.use( TabHome); // 自定义全局组件的时候需要Vue.use();

   Vue.component('tab-home', TabHome)); //初始化组件

 

two ----局部组件引入  ，写在需要的引入的组件，如helloworld

import TabAa from './tab-aa.vue'

import TabBb from './tab-bb.vue'

import TabCc from './tab-cc.vue'

export default {

name: 'HelloWorld',

components:{TabAa,TabBb,TabCc},

 

three----动态组件（tab切换  使用:is="currentTabComponent"）

<template>

<>

<button

v-for="tab in tabs"

v-bind:key="tab"

v-bind:class="['tab-button', { active: currentTab === tab }]"

v-on:click="currentTab = tab"

>{{ tab }}</button>

<component

v-bind:is="currentTabComponent"

class="tab"

></component>

</div>

</template>

export default {

name: 'HelloWorld',

components:{TabAa,TabBb,TabCc},

data () {

return {

currentTab: 'Home',

tabs: ['Home', 'Posts', 'Archive','Aa','Bb','Cc'],

 

loginType:'username',

msg: 'Welcome to Your Vue.js App'

}

},

computed: {

currentTabComponent: function () {

return 'tab-'+this.currentTab.toLowerCase()

}

},

样式：

.tab-button {

padding: 6px 10px;

border-top-left-radius: 3px;

border-top-right-radius: 3px;

border: 1px solid #ccc;

cursor: pointer;

background: #f0f0f0;

margin-bottom: -1px;

margin-right: -1px;

}

.tab-button:hover {

background: #e0e0e0;

}

.tab-button.active {

background: #e0e0e0;

}

.tab {

border: 1px solid #ccc;

padding: 10px;

}