组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
注册及使用组件
// 注册一个组件： Vue.component('my-component', { template: '<div>A custom component!</div>' }) //使用组件 <div id="example"> <my-component></my-component> </div> ...... new Vue({ el: '#example' })
data 必须是函数
组件就是vue的实例，所有vue实例中属性和方法，组件中也可以用，但是data属性必须是一个函数，因为组件会重复使用在多个地方，为了使用在多个地方的组件数据相对独立，data属性需要用一个函数来返回值。
// 定义组件 Vue.component('simple-counter', { template: '<button v-on:click="counter += 1">{{ counter }}</button>', data: function () { return { counter: 0 } } }) // 使用组件 <div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> ...... new Vue({ el: '#example-2' })
props传递数据
如果想给组件中传递参数，组件要显式地用 props 选项声明它预期的数据：
<!-- 样式 --> <style> .breadcrumb{width:90%;line-height:50px; border-bottom:1px solid #ddd;margin:0px auto;} .breadcrumb .hot{font-weight:bold;color:red;letter-spacing:2px;} </style> ...... <div id="app"> <bread-crumb pos="首页>图片列表"></bread-crumb> </div> <script> Vue.component('bread-crumb',{ props:['pos'], template:'<div class="breadcrumb" @click="fnLight">当前位置：<span :class="{hot:isHot}">{{pos}}</span></div>', data:function(){ return { isHot:false } }, methods:{ fnLight:function(){ this.isHot = !this.isHot; } } }) let vm = new Vue({ el:'#app' }) </script>
