Vue學習第四天（組件的相關功能）
，今天寫了兩個博文，第一篇補上了昨天的知識點，這一篇簡單總結下，今天的學習內容，今天主要學習了vue中的組件的概念，說起組件化的創作理念，就要在提一提我們之前的分層概念，也就是模塊化思想，這種思想在後端代碼中很常見
- 模塊化，將每一層的代碼功能細化
- 組件化，按照前臺的網頁結構進行的網頁拆分
下面簡單寫一下，vue中組件究竟是如何使用的吧
第一種方法，我們先進行繼承模板的製作，在此基礎上進行容器的製作
var com1 = Vue.extend({
//模板即我們要渲染的html結構
template: '<h3>我的一個道姑朋友</h3>'
})
//如果此處使用了駝峯命名，我們在頁面使用時應該去掉駝峯加上-
Vue.component('mycpm1', com1)
不難看出，在繼承模板中，我們定義了一個屬性template，這個屬性，我們在後面會經常提到，這是當前組件的html結構，在得到這個繼承模板以後，我們在使用vue的內置方法制作組件，組件名爲mycpm1，繼承自模板com1,在使用時，我們只需要將標籤放入到網頁中即可
<div id="app1">
<mycpm1></mycpm1>
</div>
挺簡單的吧
下面介紹第二種方式創建實例，我們將使用更簡潔的方式，那就是，將兩步合成一步
Vue.component('mycpm3', {
template:'#emp1'
})
不難看到，此時的template屬性後面跟上了一個選擇器，我們在網頁上新建一個template標籤，讓他的id等於emp1,然後就能調用了
<template id="emp1">
<div>
<input type="text" name="" id="" value="" />
<button type="button">戳我</button>
</div>
</template>
這裏順便提一下，我們的組件理論上只能有一個根，即根元素是單一的，否則，vue會報錯，上面這種定義方法，和第一種的調用方法，完全一致
另外，對於組件而言，她也有自己的數據，但是這裏的data，不再是一個屬性，而是一個方法，爲的是，多個實例使用同一個模板時，它們之間的數據不會混亂，就像這樣
var vue = new Vue({
el:'#app1',
data:{
},
methods:{
},
components:{
//可以自定義一個私有化的組件，僅供當前vue實例使用
login:{
template:'<h3>誤殺</h3>'
},
//也可以在組件中定義一個data方法，用於處理個性化的數據
mytext:{
template:'<h3>南朝四百八十寺，多少樓臺煙雨中-->{{msg}}</h3>',
data:function(){
return {
msg:"金光閃閃的五個字"
}
}
}
}
})
而且，我們還可以在組件中帶哦用，我們的數據，可以直接使用插值表達式的方式進行操作
對於昨天的動畫效果，我們也可以搬到組件中來使用，同樣，我們首先要把使用動畫的html結構使用標籤包裹住，就像下面這樣
<div id="app4">
<button v-on:click="denglu">登陸</button>
<button v-on:click="zhuce">註冊</button>
<!--可以使用v-bind:is指定不同的組件id，用一個元素，切換兩個不同組件-->
<!--通過mode屬性控制組件切換，先出後進，不會衝突-->
<transition mode="out-in">
<component v-bind:is="com1"></component>
</transition>
</div>
這個組件這裏，還是用了一個新的知識點，那就是v-bind:is，這裏是我們爲當前組件綁定了一個組件，細心的讀者可能已經發現，我們使用的標籤是通配標籤，也就是說，這個地方可以是任何我們定義過的組件，此時，這個地方是什麼標籤取決於com1的值。我們不妨在vue實例中定義一個數據com1,在定義一個函數，用來切換com1的值，就能使用一個標籤完成兩個標籤的切換
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登錄頁</title>
<script src="js/vue.js" type="text/javascript"></script>
<style>
.v-enter{
opacity: 0;
transform: translateZ(150px);
}
.v-leave-to{
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.6s ease;
}
</style>
</head>
<body>
<div id="app3">
<button v-on:click="denglu">登陸</button>
<button v-on:click="zhuce">註冊</button>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<div>-----------------------------------------------</div>
<div id="app4">
<button v-on:click="denglu">登陸</button>
<button v-on:click="zhuce">註冊</button>
<!--可以使用v-bind:is指定不同的組件id，用一個元素，切換兩個不同組件-->
<!--通過mode屬性控制組件切換，先出後進，不會衝突-->
<transition mode="out-in">
<component v-bind:is="com1"></component>
</transition>
</div>
<template id="emp1">
<h2>我的是登錄頁</h2>
</template>
<template id="emp2">
<h2>先生需要註冊哦</h2>
</template>
<script>
var vue = new Vue({
el:'#app3',
data:{
flag:true
},
methods:{
denglu:function(){
this.flag = true
},
zhuce:function(){
this.flag = false
}
},
components:{
login:{
template:'#emp1'
},
register:{
template:'#emp2'
}
}
})
var vue1 = new Vue({
el:'#app4',
data:{
com1:"login"
},
methods:{
denglu:function(){
this.com1 = "login"
},
zhuce:function(){
this.com1 = "register"
}
},
components:{
login:{
template:'#emp1'
},
register:{
template:'#emp2'
}
}
})
</script>
</body>
</html>
最後，我們講一些父子標籤的問題，在子標籤中，我們可以使用父組件中的數據和函數，不過要通過一些特殊的方式，當我們要使用數據時，我們需要三步
- 在引用時使用v-bind:xxx=“data”,將數據傳送過來
- 在組件中使用props接受一下綁定的屬性
- 在組件模板中使用即可，但是傳遞過來的數據都是隻讀的
在html中
<div id="app1">
<!--在組件上綁定函數，用來傳遞實例的方法給組件-->
<login v-bind:pmsg="msg" v-on:fun="show"></login>
</div>
<template id="emp1">
<div>
<h3>{{pmsg}}, 牧童遙指杏花村<h3>
<button v-on:click="push">push</button>
</div>
</template>
在VUE實例中
var vue = new Vue({
el:'#app1',
data:{
msg:"借問酒家何處有"
},
methods:{
show:function(){
console.log("我是父容器的一個方法，我會輸出666");
}
},
components:{
//理論上，私有組件無法訪問到所在實例的內容
//但是我們可以通過屬性綁定的方式，將數據傳遞過來
//1. 在引用時使用v-bind:xxx="data",將數據傳送過來
//2. 在組件中使用props接受一下綁定的屬性
//3. 在組件模板中使用即可，但是傳遞過來的數據都是隻讀的
login:{
template:'#emp1',
props:['pmsg'],
methods:{
push:function(){
//在組件自身的方法中，我們可以調用傳入的方法
//不過必須使用this.$emit觸發
this.$emit('fun')
}
}
}
}
})
使用父組件的方法，則需要先進行事件綁定，在使用組件內置的方法this.$emit(‘方法名’)即可調用
希望生活早日恢復正軌，爲之則易，不爲則難
