一、通過對象字面量的形式，定義一個組件模板對象
首先創建組件，同時為這個組件起一個名稱，并且利用標簽形式，在頁面中直接引入這個組件，同時還要在父組件中聲明定義。
//這個是vue模板
<div id="app">
<com1></com1>
</div>
//這個是組件模板
<template id="tmp1">
<div> //指定的唯一的根容器
<h1>這是子組件</h1>
</div>
</template>
注意：通過一個指定的id "tmp1"來表示要去加載這個指定id的tmplate元素中的內容，用來當做組件的html結構。
<script>
var com1 = {
template: '#tmp1', //子組件的名稱
}
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app', //vue的名稱
data: {},
methods: { },
components: { //通過私有創建的方式在父組件中聲明
com1
}
});
</script>
結果：
定義子組件
二、父組件向子組件傳值
注意：子組件默認無法訪問到父組件中的data的數據和methods中的方法
解決：父組件可以在引用子組件的時候，通過屬性綁定的形式（v-bind），把需要傳遞給子組件的數據，以屬性綁定的形式傳遞到子組件內部，供子組件使用。
1.先在父組件中定義要傳輸的值
我們在此時設置了一個msg
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的值',
},
methods: { },
components: {
com1
}
});
2.在父組件中綁定
注意1：把父組件傳遞過來的msg屬性，現在props數組中定義一下，才能使用。
在此我們定義為parentmsg
var com1 = {
template: '#tmp1',
props: ['parentmsg'],//只讀
}
<div id="app">
<com1 v-bind:parentmsg="msg"></com1>
</div>
注意2：組件中props所有的數據都是由父組件傳遞給子組件的
結果：
傳遞父組件的值
三、子組件通過事件調用向父組件傳值
1.先在子組件中定義數據
var com1 = {
template: '#tmp1',
props: ['parentmsg'],
data(){
return{
msg: '我是子組件里的值'
}
},
}
2.在子組件中綁定方法
<template id="tmp1">
<div>
<h1>這是子元素------{{parentmsg}}</h1>
<input value="向父組件中傳遞消息" type="button" @click="sendMsg">
</div>
</template>
3.在子組件中定義方法，通過emit
var com1 = {
template: '#tmp1',
props: ['parentmsg'],
data(){
return{
msg: '我是子組件里的值'
}
},
methods: {
sendMsg(){
this.$emit('func', this.msg)
}
}
}
4.在父組件中定義方法
<div id="app">
<com1 v-bind:parentmsg="msg" @func="msgFormson"></com1>
</div>
5.在父組件的實例中編寫方法
在此定義了一個變量用來接收子組件中的值
var vm = new Vue({
el: '#app',
data: {
msg: '這是父組件中的值',
msgformson: ''
},
methods: {
msgFormson(data) {
this.msgformson = data
console.log(this.msgformson)
}
},
components: {
com1
}
});
結果：
最終結果
當點擊button后，會將子組件里的值傳遞過來，按照父組件的方法輸出到控制臺里。
