Vue組件
什麼是組件：組件的出現，就是爲了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什麼樣的功能，就可以去調用對應的組件即可。
組件化與模塊化
模塊化：從代碼邏輯的角度進行劃分
組件化：從UI界面的角度進行劃分
創建全局組件
1vue extend
1.1先創建模板
var comlname= Vue.extend({
template:'<h3>這是使用Vue.extend創建的組件</h3>'
})
comlname爲模板名，template表示模板html結構
1.2再創建組件
Vue.component("myComl",comlname);
myComl爲組件名，coml表示之前創建的模板名
可簡寫爲
Vue.component("myComl",Vue.extend({
template:'<h3>這是使用Vue.extend創建的組件</h3>'
}));
還可以更簡單
Vue.component("myComl",{
template:'<h3>這是使用Vue.extend創建的組件</h3>'
});
模板還可以創建在html中，用id取得
<template id="test">
<h3>這是使用Vue.extend創建的組件</h3>
</template>
Vue.component("myComl",{
template:'#test'
});
注意：
- 模板只能有一個根元素
- 要引用組件，直接把組件的名稱，以HTML標籤的形式，引入到頁面中
先new Vue({el:’#myComl’}) ;
再
<div id="myComl"> <my-coml></my-coml> </div>
- 使用Vue.component時若組件名稱爲駝峯命名,例如myComl,引用時應寫爲my-coml
render渲染
var login = {
template:'<h1>這是測試組件</h1>'
}
var vm = new Vue({
el:"#app",
data:{},
methods:{},
render:function(createElements){
//createElements是一個方法,調用它,能夠把指定的模板組件渲染爲html結構
return createElements(login);
//return結果會替換整個容器
}});
結果是整個ID爲app的div被login組件替換。
創建私有組件
new Vue({
el:"#app",
data:{},
methods:{},
components: {
comlname:{
template:"<h3>這是私有組件</h3>"，
data:function(){
return {
msg:"組建的數據"
} }
}
}
})
-
組件可以有自己的data數據
-
不同於實例中的data，組件中的data必須是一個方法
(爲了組件多次調用時數據獨立，防止串了) -
組件中的data除了必須成爲一個方法外，這個方法內部，還必須返回一個對象（必須是｛｝新建的對象，不能是變量），組件中可以引用返回對象中的信息，例如
template:"<h3>這是私有組件{{msg}}</h3>",
組件切換
使用v-if和v-else配合
<div id="divApp">
<div v-if="type === 'A'" v-cloak>
A
</div>
<div v-else-if="type === 'B'" v-cloak>
B
</div>
<div v-else-if="type === 'C'" v-cloak>
C
</div>
<div v-else v-cloak>
Not A/B/C
</div>
</div>
如此type的值不同顯示的div也不同
**使用component（html）元素**
component是一個佔位符，:is屬性可以用來指定要展現的組件名稱
<component :is="thename">
</component>
可以通過設:is值爲變量來實現組件切換效果
組件間傳值
父組件向子組件傳值
子組件中,默認無法訪問到父組件中的data上的數據和methods中的方法
父組件可以在引用子組件的時候通過屬性綁定v-bind:的形式，把需要傳遞給子組件的數據，以屬性綁定的形式（綁到自己的引用標籤身上），傳到子組件內部
<coml :parentmsg="msg"></coml>
把父組件傳遞過來的parentmsg屬性,先在prop是數組中定義一下這樣才能使用數據(所有props數組中的數據，都是父組件傳給子組件的)props裏的數據不應該被修改,修改能成功,但會報錯
coml: {
template:"<h3>這是子組件---{{parentmsg}} </h3>",
props:['parentmsg']
}
父組件向子組件傳方法
先綁定，將show方法以func的名字綁定給組件
<coml @func="show"></coml>
在組件的方法中調用func方法 this.$emit(‘函數名’,參數);（可以用參數順便逆向傳遞數據，這是因爲子組件通過調用上述方法出發了父組件中的函數，函數仍作爲父組件的方法運行，藉此可利用參數給父組件數據賦值達到傳值效果）。
methods:{
sshow(){
this.$emit('func',"肌肉");
}
}
再將sshow方法綁定給組件自己的元素就可以了
用ref方法獲取元素和引用組件
獲取元素
實例
<h3 ref="myh3" @click="getElement">你好</h3>
getElement(){
console.log(this.$refs.myh3.innerText);
}
先將元素用ref綁定，再引用
組件
<coml ref="myh3" @click="getElement">你好</coml>
getComponent(){
console.log(this.$refs.myh3);
}
同樣的方法獲取組件，可通過此引用獲取組建的方法和數據。