组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>
1.全局组件：
所有实例都能用全局组件
<div id="app"> <aaa></aaa> <aaa></aaa> </div> <script> Vue.component('aaa',{ template:'<h1>自定义组件!</h1>' }) new Vue({ el:'#app' }) </script>
2.局部组件：
在实例选项中注册局部组件，这样组件只能在这个实例中使用
<div id="app"> <cc></cc> </div> <script type="text/javascript"> var Child = { template: '<h1>自定义组件!</h1>' }; new Vue({ el:'#app', components:{ 'cc':Child } }) </script>
3.参数：props
传递参数给组件
<body> <div id="app"> <aaa mess="abcd"></aaa> <aaa></aaa> </div> <script> Vue.component('aaa',{ props:['mess'], template:'<h1>---{{mess}}----</h1>' }) new Vue({ el:'#app' }) </script> </body>
4.动态参数
<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 “this.message” 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script>
