Vue自定义组件

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

如图，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

Vue自定义组件

自定义组件分为全局组件和局部组件
1、全局注册
整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。

全局组件引入写法：在项目的main.js中，例：

import Vue from 'vue';
import MyComponent from '@/components/MyComponent.vue'; // 导入自己写的组件文件

Vue.use(MyComponent); // 自定义全局组件的时候需要Vue.use();
 
Vue.component('my-component', MyComponent); //初始化组件
 
new Vue({
  el: '#app',
  router,
  components: {
    App,
    MyComponent
  },
  template: '<App/>',
}); 

2、局部组件注册、引入写法
在需要使用组件的a.vue文件中：

<template>
</template>
 
<script>
import MyComponent from '@/components/MyComponent.vue';
export default {
  components: {MyComponent}, // 直接初始化就可以啦，不需要Vue.use();
  data() {},
  methods: {}
};
</script>
<style lang="scss" scoped>
</style> 

vue组件命名问题：

1、别用驼峰式命名 因为 vue webpack编译后 ，他统一会变成小写（顾名思义：骆驼式命名法就是当变量名或函数名是由一个或多个单词连结在一起，而构成的唯一识别字时，第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母，例如：myFirstName、myLastName，这就叫驼峰命名；）
2、最好加个前缀 比如 或者<v_table></v_table>

---

ps:一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。