什么是组件:组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。在较高层面上,组件是自定义的元素,Vue。js的编译器为它添加特殊功能。在有些情况下,组件也可以是原生HTML元素的形式,以是特性扩展。
vue组件有两种,一种是全局组件,一种是局部组件。整个项目经常用到的用全局写法,用到比较少的专供特定页面用的使用局部组件。
——一个全局组件引入写法:在项目的main.js中:
第的一种,主要在。js直接写模板:“模版字符串”
Vue.component(选项卡主页,{模板:“& lt; div> component ”
}）
Vue.component (tab-posts,{模板:“& lt; div>帖子component
”
}）
Vue.component (tab-archive,{模板:“& lt; div>档案component ”
})
第二种,分别写选项卡主页。vue Tab-Posts”。vue Tab-Archive”。vue然后进口TabHome”选项卡主页。vue '
Vue。使用(TabHome);//自定义全局组件的时候需要Vue.use ();
TabHome Vue.component('选项卡主页'));//初始化组件
两个——局部组件引入,写在需要的引入的组件,如helloworld
从“进口TabAa。/tab-aa.vue '
从“进口TabBb。/tab-bb.vue '
从“进口TabCc。/tab-cc.vue '
出口默认{
名称:“HelloWorld”,
组件:{TabAa, TabBb TabCc},
3 - - - - -动态组件(选项卡切换使用:是=癱urrentTabComponent”)
& lt; template>
& lt;比;
& lt;按钮
v代表="选项卡标签"
v-bind:关键=把∠羁ā?
v-bind: class="[标签按钮,{活跃:currentTab===选项卡}]”
v:点击=癱urrentTab=选项卡”
在{{标签}}& lt;/button>
& lt;组件
v-bind:=" currentTabComponent "
类="标签"
祝辞& lt;/component>
& lt;/div>
& lt;/template>
出口默认{
名称:“HelloWorld”,
组件:{TabAa, TabBb TabCc},
数据(){
返回{
currentTab:“回家”,
标签:[‘回家’,“文章”,“档案”,“Aa”,“Bb”、“Cc”),
loginType:“用户名”,
味精:“欢迎来到你的Vue。js应用”
}
},
计算:{
currentTabComponent:函数(){
返回”标签——“+ this.currentTab.toLowerCase ()
}
},
样式:
.tab-button {
填充:6 px 10 px;
border-top-left-radius: 3 px;
border-top-right-radius: 3 px;
边界:1 px固体# ccc;
光标:指针;
背景:# f0f0f0;
margin-bottom: 1 px;
margin-right: 1 px;
}
.tab-button:{徘徊
背景:# e0e0e0;
}
.tab-button。活跃的{
背景:# e0e0e0;
}
.tab {
边界:1 px固体# ccc;
填充:10 px;
}
以上所述是小编给大家介绍的vue组件(全局,局部,动态加载组件)实例详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留的言,小编会及时回复大家的!
