vue组件（全局，局部，动态加载组件）
发布时间：2020-12-17 02:10:58 所属栏目：百科 来源：网络整理
导读：说说Vue.js组件 什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特性扩展。 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 '
<>
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;
}
总结以上所述是小编给大家介绍的vue组件（全局，局部，动态加载组件）实例详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！ （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |