组件（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>