為了搞清楚父元件與子元件，下面我們先來搞清楚元件的建立與注冊的圖示過程：
看完過程後我們再來看看菜鳥教程中的vue元件執行個體，執行個體越簡單越好，這是菜鳥教程中的全局元件執行個體：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<div id="app">
<runoob></runoob>
</div>
<script>
//第一種定義方式
Vue.component('runoob',{
template:'<h1>自定義元件</h1>'
})
new Vue({
el:'#app'
})
//第二種定義方式
/* var component=Vue.extend({
template:'<h1>自定義子元件</h1>'
})
Vue.component('runoob',component);
new Vue({
el:'#app'
})*/
</script>
</body>
</html>
顯示結果：
結合上面兩種定義方法，在此我順便說一下Vue.extend與Vue.component之間的差別：
Vue.extend隻是建立元件的一個構造器，你給它參數 他給你一個元件。然後作用到Vue.component 這個全局注冊方法裡，就如上面代碼執行個體。
下面我們再結合上面的全局元件執行個體代碼，來講講父元件與子元件。要明白這兩個概念，首先要明白這二者之間的關系，我想關于父子關系在此我不用多說。結合上面代碼的第一種方法來講講：
runoob與标簽h1就是父元件與子元件之間的關系。
http://www.cnblogs.com/keepfool/p/5625583.html#top