組件是出現(xiàn)就是偽類拆分vue實例的代碼量的抄沮,以組件來劃分不同的模塊京革,將來我們需要什么樣的功能,我們可以調(diào)用相應(yīng)的組件
全局組件
Vue.component('組件的名稱',{
id:'#tmp1';
})
<template id=tmp1></template>
私有組件
components :{
login:{
template:'#tmp1'
}
}
<login></login>
組件中的 data
Vue.componens('組件名',{
template:'#app1',{
data:function(){
return{
msg:'這是組件中的data定義的數(shù)據(jù)'
}
} ,//定義fn,返回對象,組件中的使用方式 和實例中的data使用完全一樣
methods:{
//方法
}
}
})
兩個組件之間的切換
方式一 : v-else v-if
方式二:vue提供了component來展示對應(yīng)名稱的組件 component是一個占位符 is屬性名稱 可以用來指定要展示的組件的名稱
<component :is="componentId"></component>