组件需要注册后才能使用，注册分为全局注册和局部注册。全局注册后，所有Vue实例都可以使用该组件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <my_counter></my_counter> <my_counter></my_counter> </div> <script> //注册全局组件 Vue.component('my_counter',{ data:function(){ return { count:0 } }, template:'<button @click="count++">点击了{{count}}次</button>' }); var app = new Vue({ el:'#app', data:{}, }); </script> </body> </html>在这个页面中，注册一个全局组件my-counter，这个组件显示的内容是在template选项中定义的，这里定义了一个<button>模板。点击按钮时，会对这个组件内data函数返回的数据count执行递增操作。
全局组件my-counter注册后，在父实例中可以使用<my-counter></my-counter>这样的形式来使用组件，这里my-counter使用了两次。
把父组件的数据传递给子组件，子组件会根据接收的数据来渲染不同的内容或执行不同的操作。要让子组件使用父组件的数据，需要通过子组件的props选项，使用静态props实现将父组件数据传递给子组件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <child message="Hello Vue!"></child> </div> <script> //注册全局组件 Vue.component('child',{ //声明props,期望从父组件获取数据message props:['message'], template:'<span>{{message}}</span>' }); var app = new Vue({ el:'#app', data:{}, }); </script> </body> </html>使用v-bind动态绑定props的值到父组件中，每当父组件的数据变化时，该变化也会传导给子组件。动态props实现将父组件数据传递给子组件，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="parentMessage"> <br> <child v-bind:message="parentMessage"></child> </div> <script> //注册全局组件 Vue.component('child',{ //声明props,期望从父组件获取数据message props:['message'], template:'<span>{{message}}</span>' }); var app = new Vue({ el:'#app', data:{ parentMessage:'I\'m vue' }, }); </script> </body> </html>
