vue学习笔记
关于vue组件
组件系统是vue的另一个重要概念，它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
首先，组件可以提升整个项目的开发效率。能够把页面抽象成多个相对独立的模块，解决了我们传统项目开发：效率低、难维护、复用性等问题。
然后，使用Vue.extend方法创建一个组件，然后使用Vue.component方法注册组件。子组件需要数据，可以在props中接受定义。而子组件修改好数据后，想把数据传递给父组件。可以采用emit方法。
第一步：在components目录新建你的组件文件（例如Breadcrumb.vue），script一定要export default {
第二步：在需要用的页面（组件）中导入：import breadcrumb from ‘…/components/Breadcrumb.vue’
第三步：注入到vue的子组件的components属性上面,components:{breadcrumb}
第四步：在template视图view中使用
注：vue中每一个组件都可以自定各自的css样式，如果希望组件内的样式只对当前组件起作用，可以在style标签中增加scoped即可。
该写法会让vue在渲染组件的时候给每个元素都增加一个data-v-/版本号/的属性，可以保证只针对有同样data-v-data-v-/版本号/的元素应用该样式。
以下是官方 Vue 组件的示例：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter></button-counter>
</div>new Vue({ el: '#components-demo' })因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。
