組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, maximum-scale=1.0"> <title>組件注冊</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <h4>注冊全局組件</h4> <div id="app-1"> <my-component></my-component> </div> <script> //注冊 全局 組件 Vue.component('my-component',{ //選項 template:'<div>這是全局注冊組件</div>' }) //創建根實例 var app1=new Vue({ el:'#app-1', }) </script> <hr> <h4>注冊局部組件</h4> <div id="app-2"> <div id="app-2"> <my-component></my-component> </div> </div> <script> var Child=Vue.extend({ template:'<div>A custom component!</div>' }) var app3=new Vue({ el:'#app-2', components:{ 'my-component':Child } }) </script> <hr> <h4>data必須是函數</h4> <div id="app-3"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <script> var data = { counter: 0 } Vue.component('simple-counter',{ template:'<button v-on:click="counter+=1">{{ counter }}</button>', data:function(){ return { counter:0 } } }) var app4=new Vue({ el:'#app-3' }) </script> <hr> <h4>使用Prop傳遞數據</h4> <div id="app-4"> <child message="hello,vue.js"></child> </div> <script> Vue.component('child', { // 聲明 props props: ['message'], // 就像 data 一樣，prop 可以用在模板內 // 同樣也可以在 vm 實例中像 “this.message” 這樣使用 template: '<span>{{ message }}</span>' }) var app5=new Vue({ el:'#app-4' }) </script> <hr> <h4>camelCase-vs-kebab-case</h4> <div id="app-5"> <child my-message="hello!"></child> </div> <script> Vue.component('child',{ props:['myMessage'], template:'<span>{{myMessage}}</span>' }) var app6=new Vue({ el:'#app-5' }) </script> <pre>HTML 特性不區分大小寫。當使用非字符串模版時，prop的名字形式會從 camelCase 轉為 kebab-case（短橫線隔開）</pre> </body> </html>