創建組件的方式
// 1.1使用Vue.extend 來創建全局的Vue組件
var com1 = Vue.extend({
// 通過template屬性，指定了組件要展示的HTML結構
template:'<h3>這是使用Vue.extend 創建的組件</h3>'
})
// 1.2使用Vue.component('組件的名稱',創建出來的組件模板對象)
Vue.component('myCom1',com1)
使用Vue.extend({})來創建Vue的全局模板對象，其中template指定了組件要展示的HTML結構，然後使用使用Vue.component來定義一個組件。
以下是簡寫方式
Vue.component('myCom1',{
// 注意：無論是哪種方式創建出來的組件，組建的template屬性指向得到模板內容，
// 必須有且只能有唯一的一個根元素
template:'<div><h3>這是使用Vue.component 直接創建的組件</h3><span>123</span></div>'
})
注意：無論是哪種方式創建出來的組件，組件的template屬性指向的模板內容，必須有且只能有唯一的一個根元素
創建私有的組件
let vm2 =new Vue({
el:'#app2',
data:{},
methods:{},
components:{
login:{
template:"<h1>這是私有的login組件</h1>"
}
}, //定義實例內部私有組件的
})
通過components屬性定義私有的組件。通過以上方式即可在HTML結構中使用<login></login>標籤。
組件的data數據
1.組件中可以有自己的data數據。
2.組件中的data數據和實例中的data數據不一樣，實例中的data數據可以爲一個對象，但是組件中的data必須是一個方法。
3.組件中的data除了必須是一個方法之外，這個方式內部還必須返回一個對象
Vue.component('myCom',{
template:'<h1>這是全局組件-----{{msg}}</h1>',
data:function(){
return {
msg:'111'
}
}
})
組件切換的方式
<body>
<div id="app">
<a href="" @click.prevent ='flag =true'>登錄</a>
<a href="" @click.prevent ='flag =false'>註冊</a>
<login v-if='flag'></login>
<register v-else='flag '></register>
</div>
<script>
Vue.component('login',{
template:'<h1>登錄組件</h1>'
})
Vue.component('register',{
template:'<h1>註冊組件</h1>'
})
let vm =new Vue({
el:'#app',
data:{
flag:true
},
methods:{}
})
</script>
</body>
可以通過以上方式來切換組件，定義一個flag變量，通過v-show來不斷的切換組件，但是這種方式有一種弊端，只能在兩種組件中選擇切換，所以建議使用以下方式。
<body>
<div id="app">
<a href="" @click.prevent ='isCom="login"'>登錄</a>
<a href="" @click.prevent ='isCom="register"'>註冊</a>
<!-- Vue提供了component，來展示對應名稱的組件 -->
<!-- component是一個佔位符，:is屬性，可以用來指定要展示的組件的名稱 -->
<component :is="isCom"></component>
</div>
<script>
Vue.component('login',{
template:'<h1>登錄組件</h1>'
})
Vue.component('register',{
template:'<h1>註冊組件</h1>'
})
let vm =new Vue({
el:'#app',
data:{
isCom:'login'
},
methods:{}
})
</script>
</body>
Vue提供了component來展示對應名稱的組件，component是一個佔位符，：is屬性，可以用來指定要展示的組件的名稱，這樣就可以再多種組件之間完成切換。
組件之間傳值的問題
父組件向子組件傳遞一個data數據
<body>
<div id="app">
<!--
父組件可以再引用子組件的時候，通過屬性綁定（v-bind）的形式，把需要傳遞
給子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用
-->
<com1 :parentmsg="msg"></com1>
</div>
<script>
let vm =new Vue({
el:'#app',
data:{
msg:'123'
},
methods:{},
components:{
com1:{
// 子組件中的data數據，並不是通過父組件傳遞過來的，而是子組件自身私有的
data(){ //data中的數據都是可讀可寫的
return {
title:'213',
content:'qq'
}
},
template:'<h1>這是子組件---------{{parentmsg}}</h1>',
// 注意：組件中的所有props中的數據，都是通過父組件傳遞給子組件的
// props中的數據都是隻讀的，無法重新賦值
props:[ //把父組件傳遞來的parentmsg屬性，先在props數組中定義一下，這樣，才能使用這個數據
'parentmsg'
]
},
}
})
</script>
</body>
父組件可以再引用子組件的時候，通過屬性綁定（v-bind簡寫：）的形式，把需要傳遞給子組件的數據，以屬性綁定的形式，傳遞到子組件內部，供子組件使用。在子組件中，把父組件傳遞來的值，在props數組中定義一下，才能使用。
注意：props中的數據只能讀不能寫，不能在子組件中修改props中父組件傳遞來的值
父組件向子組件傳遞一個方法
<body>
<div id="app">
<!--
父組件向子組件傳遞方法，使用的是事件綁定機制；v-on 簡寫@
當我們自定義一個事件屬性之後，那麼，子組件就能夠，通過某些方式，來調用傳遞進去的這個方法了
-->
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>這是子組件</h1>
<input type="button" value="這是子組件的按鈕" @click='myclick'>
</div>
</template>
<script>
// 定義了一個字面量類型的組件模板對象
var com2 ={
template:'#tmpl',
data(){
return{
}
},
methods:{
myclick(){
this.$emit('func',123)
}
}
}
let vm =new Vue({
el:'#app',
data:{
},
methods:{
show(data){
console.log("調用了父組件的方法"+ data)
}
},
components:{
com2,
}
})
</script>
</body>
當父組件向子組件傳遞方法時，使用的事件綁定機制，（v-on簡寫@），當我們自定義一個事件屬性之後，那麼，子組件就能夠通過某些方式使用這個方法了。在子組件中可以通過this.$emit（），來調用父組件傳遞來的方法，並且當方法中需要傳入參數時，可以在第二個參數中，傳入相應的參數。
可以利用this.$emit（）方法實現子組件向父組件傳值，例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<com2 @func="show"></com2>
</div>
<template id="tmpl">
<div>
<h1>這是子組件</h1>
<input type="button" value="這是子組件的按鈕" @click='myclick'>
</div>
</template>
<script>
// 定義了一個字面量類型的組件模板對象
var com2 ={
template:'#tmpl',
data(){
return{
sonmsg:{name:'kobe',age:32}
}
},
methods:{
myclick()
this.$emit('func',this.sonmsg)
}
}
}
let vm =new Vue({
el:'#app',
data:{
predata:null
},
methods:{
show(data){
this.predata =data
}
},
components:{
com2,
}
})
</script>
</body>
</html>
