前端之家收集整理的这篇文章主要介绍了
vue组件（全局，局部，动态加载组件），
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
说说Vue.js组件
什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。
one----全局组件引入写法：在项目的main.js中：
第一种，在main.js直接写template：' 模版字符串'
Home component
`
})
Vue.component('tab-posts',{ template: `
Posts component
`
})
Vue.component('tab-archive',{ template: `
Archive component
`
})
第二种，分别写tab-home.vue Tab-Posts'.vue Tab-Archive'.vue然后import TabHome from ‘ Tab-Home.vue '
自定义全局组件的时候需要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"）
<>
export default {
name: 'HelloWorld',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;
}
