vue2.0 自定义组件的方法（vue组件的封装）

下面我将详细讲解“vue2.0 自定义组件的方法（vue组件的封装）”的完整攻略。

1. vue组件的封装

Vue是一个组件化开发的框架，在实际开发中，我们常常需要将一些通用的功能封装成组件，以方便复用。Vue中封装组件的方法主要有两种：

• 全局组件：在Vue的实例中注册一个全局组件，可以在全局范围内使用；
• 局部组件：在Vue组件中定义局部组件，只能在该组件内部使用。

2. 自定义全局组件

定义全局组件的方法是在Vue实例上注册组件。下面是示例代码：

<template>
  <div id="app">
    <my-component></my-component>
  </div>
</template>

<script>
import Vue from 'vue';
import MyComponent from './components/MyComponent.vue';

Vue.component('my-component', MyComponent);

export default {
  name: 'app',
};
</script>

上面代码中，通过Vue.component()方法定义了一个全局组件my-component。注册完组件后，在模板中即可使用该组件。

3. 自定义局部组件

定义局部组件的方法是在Vue组件内部定义组件。下面是示例代码：

<template>
  <div class="child">
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'parent-component',
  components: {
    'child-component': ChildComponent,
  },
};
</script>

上面代码中，在Vue组件的components选项中定义了一个子组件child-component，子组件的定义在import语句中引入。注册完组件后，在父组件的模板中即可使用子组件。

4. 自定义组件的命名规范

在Vue中自定义组件的命名规范非常重要。

• 组件的标签名应该使用短横线连接的小写形式，例如<my-component>，不要使用驼峰命名，例如<MyComponent>；
• 组件文件的名字应该使用 PascalCase 命名，例如MyComponent.vue。

按照上述命名规范，我们就能够方便地使用自定义的组件了。