小白菜笔记 Vue （四）组件

组件系统是Vue的一个重要概念，它允许我们使用小型、独立和通常可复用的组件构建大型应用。

自定义组件

• 全局组件

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

new Vue({ 
    el: '#components-demo',
    template: `<div id="components-demo">
  <button-counter></button-counter>
</div>`
})

• 单文件组件

单文件组件保存在文件扩展名为.vue的文件中，在main.js文件中用import引入

<template>
  <button v-on:click="count++">
      You clicked me {{ count }} times.
  </button>
</template>

<script>
module.exports = {
  data: function () {
    return {
      count: 0
    }
  }
};
</script>

<style>
</style>

---

相比于全局组件，单文件组件没有唯一命名的限制，而且支持CSS，可以用预处理器构建。