Vue-2.0组件化开发

组件化

一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用->提升开发效率

组件分类：普通组件、根组件

根组件

整个应用最上层的组件，包裹所有普通小组件。

 Ctrl+C终止程序，然后装包（使用yarn前提要有yarn）

也可以使用npm add less less-loader装包

<style lang="less" scoped></style>

普通组件的注册使用

组件注册的两种方式：

1.局部注册：只能在注册的组件内使用

1）创建.vue文件（单文件组件）

2）在使用的组件内导入并注册，components{组件名:组件对象}，如果组件名和组件对象相同可以简写为components{组件名}

使用：当成html标签使用'<组件名></组件名>'

注意：组件名规范->大驼峰命名法，如：HmHeader

注意：导入时组件文件名不要加.vue的后缀

2.全局注册：所有组件内都能使用 

1)创建.vue文件（单文件组件）

2）main.js中进行全局注册

import HmButton from './components/HmButton.vue'
Vue.component('HmButton', HmButton)

使用：当成html标签使用'<组件名></组件名>'

注意：组件名规范->大驼峰命名法，如：HmHeader

技巧：一般都是用局部注册，如果发现确实是通用组件，再抽离到全局。

注意

组件文件的data一定要是一个函数

一个组件的data选项必须是一个函数。->保证每个组件实施，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data函数，得到一个新对象。

<script>
export default {
  data() {
    return {
      count: 999,
    };
  },
};
</script>